如果在開發中要用到一個 RN 沒有提供的元件，或者想複用 Java 程式碼已經實現的元件而不是用 JavaScript 再造一個車輪子，或者想使用 Java 高效的處理圖片、訪問資料庫、多執行緒程式設計等，你可以使用 RN 做到 JavaScript 與 Java 非同步通訊。

這裡我們以 Android 提供的 Toast 為例。在 RN 工程裡使用 JavaScript 呼叫 Android 系統的 Toast。

首先來看一下工程目錄結構：

如上圖，我們的工程叫 Awesome。左側的是 Atom 工程，右側的是將其中的 android/app 目錄匯入 Android Studio 後的 工程。
Java 檔案包括：

• MainActivity.java;
• AwesomeReactPackage.java;
• ToastModule.java，RN 已經提供了該檔案，實際開發過程中直接引用即可，本文為了學習需要單獨寫出；

JavaScript 檔案包括：

• index.android.js;
• ToastAndroid.js。

檔案內容分別如下：
MainActivity

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

    private ReactInstanceManager mReactInstanceManager;
    private
 
 ReactRootView mReactRootView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);

        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle"
 
)
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        mReactRootView.startReactApplication(mReactInstanceManager, "Awesome", null);

        setContentView(mReactRootView);
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onPause();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onResume(this, this);
        }
    }

    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new AwesomeReactPackage());
    }
}

ToastModule

public class ToastModule extends ReactContextBaseJavaModule {

  private static final String DURATION_SHORT_KEY = "SHORT";
  private static final String DURATION_LONG_KEY = "LONG";

  public ToastModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return "ToastAndroid";
  }

  @Override
  public Map<String, Object> getConstants() {
    final Map<String, Object> constants = new HashMap<>();
    constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
    constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
    return constants;
  }

  @ReactMethod
  public void show(String message, int duration) {
    Toast.makeText(getReactApplicationContext(), message, duration).show();
  }
}

AwesomeReactPackage

public class AwesomeReactPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new ToastModule(reactContext));

        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return null;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return null;
    }
}

ToastAndroid

var { NativeModules } = require('react-native');
module.exports = NativeModules.ToastAndroid;

在 index.android.js 中使用 ToastAndroid：

var ToastAndroid = require('./ToastAndroid');
ToastAndroid.show('Awesome', ToastAndroid.LONG);

下面講解各個檔案的作用。