React-Native与Android的交互通信

React-Native与Android的交互通信

 

• 需要满足原Android项目中已经导入react-native项目的前提下执行，接着需要创建一个Activity类继承ReactActivity，如下所示（其中类名自定义，而getMainComponentName方法的返回值与Android项目名一致）：

public class MyTestReact extends ReactActivity {

    @Nullable
    @Override
    protected String getMainComponentName() {
        return "MyTestDemo";
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
}

• 创建一个Module 类继承ReactContextBaseJavaModule，该类中有实现传送数据给React-Native的方法，需要注意：其中getName方法的返回值是用于React-Native中调用该Module类中传送数据的方法，并需要知道被调用的该方法名，相当于一个协议，并且使用DeviceEventEmitter方法时还需知道eventName的值用于在React-Native调用监听方法时所需，如下：

public class CommModule extends ReactContextBaseJavaModule {

    private final String MODULE_NAME="commModule";

    private ReactContext mContext;

    private String eventName="nativeCallRn";


    public CommModule(ReactApplicationContext reactContext) {

        super(reactContext);

        mContext=reactContext;

    }

    @Override

    public String getName() {

        return MODULE_NAME;

    }

    /**

     * Native调用RN

     * @param msg

     */

    public void nativeCallRn(String msg){

        mContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)

                .emit(eventName, msg);

    }

    /**

     * DeviceEventEmitter方法传送参数

     */

    @ReactMethod

    public void sendMsgToRN() {

        Log.e("---","sendMsgToRN");

        nativeCallRn("hello");

    }

    /**

     * CallBack 方法

     * @param ：传送参数

     * @param callback：处理方法

     */

    @ReactMethod

    public void rnCallNativeCallback(String msg, Callback callback){

        String result="处理结果："+msg;

        callback.invoke(result);

    }

    /**

     * Promise 方式

     * @param msg：传送参数

     * @param promise：Promise对象

     */

    @ReactMethod

    public void rnCallNativeFromPromise(String msg, Promise promise) {



        Log.e("---","adasdasda");

        // 1.处理业务逻辑...

        String result = "处理结果：" + msg;

        // 2.回调RN,即将处理结果返回给RN

        promise.resolve(result);

    }

}

• 创建一个Package类实现ReactPackage接口，如下：

public class CommPackage implements ReactPackage {

    public CommModule mModule;
    @Override

    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

        List<NativeModule> modules=new ArrayList<>();

        mModule=new CommModule(reactContext);

        modules.add(mModule);

        return modules;

    }
    @Override

    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {

        return Collections.emptyList();

    }



}

• 创建一个Application类继承Application并实现ReactApplication接口，其中需要创建一个ReactNativeHost对象的实例，用于getReactNativeHost方法的返回值，如下：

public class CommApplication extends Application implements ReactApplication {

    private static CommApplication commApplication;

    @Override

    public void onCreate() {

        super.onCreate();

        commApplication=this;

    }

    private final ReactNativeHost mReactNativeHost=new ReactNativeHost(this) {

        @Override

        public boolean getUseDeveloperSupport() {

            return BuildConfig.DEBUG;

        }

        @Override

        protected List<ReactPackage> getPackages() {



            return Arrays.<ReactPackage>asList(new MainReactPackage(),new CommPackage());

        }

    };

    @Override

    public ReactNativeHost getReactNativeHost() {

        return mReactNativeHost;

    }
    /**

     * 获取 reactPackage

     * @return

     */



    public static CommApplication getInstance(){

        return commApplication;

    }



}

• 需要在清单文件AndroidManifest.xml中注册自定义的Application类，如下（添加android.name即可）：

<application

    android:name=".CommApplication"

    android:allowBackup="true"

    android:icon="@mipmap/ic_launcher"

    android:label="@string/app_name"

    android:roundIcon="@mipmap/ic_launcher_round"

    android:supportsRtl="true"

    android:theme="@style/AppTheme">

• 在React-Native中的调用如下：

这个方法（选择其中的一个方法实现数据传送）用于点击实现接收数据调用Android的传送数据的方法

clickChat(){

    console.log(constants.logTag,'start=====');

   //DeviceEventEmitter方法

    NativeModules.commModule.sendMsgToRN();

   //CallBack方法

   NativeModules.commModule.rnCallNativeCallback("callBack Hello",(result)=>{

 console.log(constants.logTag,'success=====callback'+result);

});

   //Promise方法NativeModules.commModule.rnCallNativeFromPromise(msg).then(

    (result) =>{

        ToastAndroid.show("Promise收到消息:" + result, ToastAndroid.SHORT)

    }

).catch((error) =>{console.log(error)});

}
// 在渲染结束后调用一次，用于耗时操作

componentDidMount(){

    //监听Android传送数据，用于DeviceEventEmitter方法

    DeviceEventEmitter.addListener('nativeCallRn',(msg)=>{

        title='React Native界面，收到数据：';

        ToastAndroid.show('发送成功：'+ msg, ToastAndroid.SHORT);

    });

}

其中数据传送的三种方法的区别：

三种方式各具不同优缺点

1. RCTDeviceEventEmitter

   优点：可任意时刻传递，Native主导控制。

2. Callback

   优点：JS调用，Native返回。

   缺点：CallBack为异步操作，返回时机不确定

3. Promise

   优点：JS调用，Native返回。

   缺点：每次使用需要JS调用一次