RN 与 Android(安卓)代码交互

如果在开发中要用到一个 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);

下面讲解各个文件的作用。

更多相关文章

随机推荐