React Native 原生模块和 JS 模块交互（Android）

创建一个原生模块 ZanIntentModule 并继承抽象类 ReactContextBaseJavaModule ，同时实现几个方法。

public classZanIntentModuleextendsReactContextBaseJavaModule{

    publicZanIntentModule(ReactApplicationContext reactContext){
        super(reactContext);
    }

    @Override
    publicStringgetName(){
        return "ZanIntentModule";
    }

    @Override
    publicMap<String, Object>getConstants(){
        final Map<String, Object> constants = new HashMap<>();
        return constants;
    }

    /**
     * js call native to start activity
     *
     * @param toActivityName
     * @param map
     */
    @ReactMethod
    publicvoidstartActivity(String toActivityName, ReadableMap map){
        try {
            Activity currentActivity = getCurrentActivity();

            if (currentActivity != null) {
                Class toActivity = Class.forName(toActivityName);
                Intent intent = getActivityIntent(currentActivity, toActivity, map);
                currentActivity.startActivity(intent);
            }
        } catch (Exception e) {
            throw new JSApplicationIllegalArgumentException(
                    "Could not open Activity : " + e.getMessage());
        }
    }
}

getName()

@Override
publicStringgetName(){
    return "ZanIntentModule";
}

这个函数用于 返回一个字符串名字，这个名字在 JavaScript 端标记这个模块 。这里我们把这个模块命名为 ZanIntentModule ，这样就可以在 JavaScript 中通过 NativeModules.ZanIntentModule 访问到这个模块。

getConstants()

@Override
publicMap<String, Object>getConstants(){
    final Map<String, Object> constants = new HashMap<>();
    return constants;
}

如果需要在 Java 和 JavaScript 之间定义常量，则要覆盖这个方法，返回需要导出给 JavaScript 使用的常量。

@ReactMethod

要导出一个方法给 JavaScript 使用，Java 方法需要使用注解 @ReactMethod ，方法的返回类型必须为 void 。React Native 的跨语言访问是异步进行的，所以想要给 JavaScript 返回一个值的唯一办法是使用回调函数或者发送事件。

@ReactMethod
publicvoidstartActivity(String toActivityName, ReadableMap map){
    try {
        Activity currentActivity = getCurrentActivity();

        if (currentActivity != null) {
            Class toActivity = Class.forName(toActivityName);
            Intent intent = getActivityIntent(currentActivity, toActivity, map);
            currentActivity.startActivity(intent);
        }
    } catch (Exception e) {
        throw new JSApplicationIllegalArgumentException(
                "Could not open Activity : " + e.getMessage());
    }
}

在 JavaScript 中可以这样调用

NativeModules.ZanIntentModule.startActivity(
    'com.danke77.sample.activity.WebViewActivity',
    {
      'url': url
    })

1.2 注册模块

创建一个 Package 类 ZanReactPackage 并实现 ReactPackage ，在 createNativeModules 方法中添加这个模块。

public classZanReactPackageimplementsReactPackage{
    @Override
    publicList<NativeModule>createNativeModules(ReactApplicationContext reactContext){
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ZanIntentModule(reactContext));
        return modules;
    }

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

    @Override
    publicList<ViewManager>createViewManagers(ReactApplicationContext reactContext){
        return Collections.emptyList();
    }
}

1.3 添加模块

在 Application 中的 ReactNativeHost 实例里 getPackages 方法添加 ZanReactPackage 实例

@Override
protectedList<ReactPackage>getPackages(){
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new ZanReactPackage()
    );
}

1.4 回调函数

Callback

Callback 是 com.facebook.react.bridge 中的一个接口，作为 ReactMethod 的一个传参，用来映射 JavaScript 的回调函数（function）。

Callback 接口只定义了一个方法 invoke，invoke 接受多个参数，这个参数必须是 com.facebook.react.bridge 中支持的参数。

@ReactMethod
publicvoidlogin(String name, String password, Callback success, Callback failure){
    try {
        if (TextUtils.isEmpty(name)) {
            failure.invoke("name is empty");
            return;
        }
        if (TextUtils.isEmpty(password)) {
            failure.invoke("password is empty");
            return;
        }

        if (new LoginTask().login(name, password)) {
            success.invoke(name);
        } else {
            failure.invoke("login failure");
        }
    } catch (Exception e) {
        e.printStackTrace();
        failure.invoke(e.getMessage());
    }
}

在 JavaScript 中可以这样调用

NativeModules.LoginModule.login('name', 'password', (name) => {
    alert(name)
  }, (err) => {
    alert(err)
  })

Promise

Promise 是 ES6 中增加的对于异步编程和回调更加友好的 API。

在 com.facebook.react.bridge 中定义的 Promise 接口，实现了 resolve 和 reject 方法， resolve 用来处理正确结果， reject 用来处理异常。

@ReactMethod
publicvoidlogin(String name, String password, Promise promise){
    try {
        if (TextUtils.isEmpty(name)) {
            promise.reject("-1", "name is empty");
            return;
        }
        if (TextUtils.isEmpty(password)) {
            promise.reject("-2", "password is empty");
            return;
        }

        if (new LoginTask().login(name, password)) {
            WritableMap map = Arguments.createMap();
            map.putString("name", name);
            promise.resolve(map);
        } else {
            promise.reject("-3", "login failure");
        }
    } catch (Exception e) {
        e.printStackTrace();
        promise.reject(e);
    }
}

在 JavaScript 中可以这样调用

NativeModules.LoginModule.login('name', 'password')
    .then(
      (map) => {
        alert(map.name)
      }
    )
    .catch(
      (code, err) => {
        alert(err)
      }
    )

或者用 async/await 来修饰，以同步方式调用原生模块

async login() {
    try {
      var {
        name
      } = await NativeModules.LoginModule.login('name', 'password')
        alert(name)
    }
    catch (code, err) {
      alert(err)
    }
}

在原生模块中 Promise 类型的参数必须要放在最后一位，这样 JavaScript 调用的时候才能返回一个 Promise。

2. 原生模块发送事件到 JS 模块

原生模块可以在没有被调用的情况下往 JavaScript 发送事件通知。

protectedvoidsendEvent(ReactContext reactContext,
                         String eventName,
                         @Nullable WritableMap params) {
    reactContext
            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
            .emit(eventName, params);
}

发送事件时

WritableMap params = Arguments.createMap();
params.putInt("unread", unreadCount);
sendEvent(getReactApplicationContext(), "onRefreshMessage", params);

向 JavaScript 模块发送了一个名为 onRefreshMessage 的事件，并携带了 params 作为参数。

JavaScript 模块可以通过使用 DeviceEventEmitter 模块来监听事件

componentDidMount() {
    DeviceEventEmitter.addListener('onRefreshMessage', this.onUpdateMessage)
}

componentWillUnmount() {
    DeviceEventEmitter.removeListener('onRefreshMessage', this.onUpdateMessage)
}

onUpdateMessage = (e) => {
    alert(e.unread)
}