React-Native与Android互相调用

React-Native环境搭建完毕，首先肯定是先用起来，跑一个项目把玩把玩，而不是一下子钻进技术知识点细节然后劝退。

一.初始化默认示例项目

我们可以使用react-native命令初始化一个RN项目：react-native init AwesomeProject

构建下react-native项目 npm install

构建完成，运行npm start,如果需要清理下缓存使用：npm start -- --reset-cache

这样RN项目启动完成。

怎么运行app到手机呢，可以借助AndroidStudio，打开项目中Android板块代码，直接运行，可以安装Android的Apk包部署到手机上。

然后在命令行窗口按d键，或者手机摇一摇进入debug的设置菜单，setting栏，配置电脑端ip和端口号，需要手机同电脑端在同一个wifi网络下。

以上就是初始化项目然后运行到我们手机上的过程。下面讲解下本文的核心，如何实现React-Native与Android互相调用？

---

二.React-Native与Android互相调用

首先创建一个CustomModule继承ReactContextBaseJavaModule。重写getName方法，返回定义的字符串"CustomModule"。实现一个sendRequest(String message)方法接受RN调用Android传过来的值message。

public class CustomModule extends ReactContextBaseJavaModule {

    private ReactApplicationContext reactContext;
    public static final String TAG = "CustomModule";

    public CustomModule(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

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

    // 接受RN过来的参数
    @ReactMethod
    public void sendRequest(String message) {
        Log.d(TAG,"=====收到来自RN调用的方法，参数:"+message);
        //Android调用RN
        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("FromAndroid","Android");
    }

}

创建一个类AndroidReactPackage实现ReactPackage，重写createNativeModules方法，将上面创建的CustomModule，add进去,然后返回。

public class AndroidReactPackage implements ReactPackage {
    @NonNull
    @Override
    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new CustomModule(reactContext));
        return modules;
    }

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

在Application类中，重写getReactNativeHost方法，将上面AndroidReactPackage在getPackages里add进去返回。

 private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
//          @SuppressWarnings("UnnecessaryLocalVariable")
//          List<ReactPackage> packages = new PackageList(this).getPackages();
//          // Packages that cannot be autolinked yet can be added manually here, for example:
//          // packages.add(new MyReactNativePackage());
//          return packages;
            return Arrays.<ReactPackage>asList(new MainReactPackage(),new AndroidReactPackage());
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

至此，Android端的方法处理完成。下面看下React-Native怎么调用CustomModule中的sendRequest方法。

在React-Native定义一个NativeUtils.ts文件：

import { NativeModules } from 'react-native';

const { CustomModule } = NativeModules;

const sendRequest = (msg) => {
    const {sendRequest: sendRequest} = CustomModule ?? {};
    return sendRequest && sendRequest(msg);
};

export default {
    sendRequest,
};

在RN的App启动页js文件里调用：

//接收到Android参数
DeviceEventEmitter.addListener('FromAndroid', msg => {
  console.log('收到来自Android消息：' + msg);
});

//RN 调 Android
NativeUtil.sendRequest('React-Native');

---

以上就是，RN通过@ReactMethod注解调用Android方法，然后Android通过RCTDeviceEventEmitter发送事件消息到RN。