React Native与Android 原生通信

作者: Jack921 | 来源:发表于2018-04-27 11:50 被阅读265次

我们用React Native 做混合开发的时候免不了要原生和React Native 进行通信交互，这篇文章就是分享原生模块与JS传递数据的几种方式。

总的步骤可以分为如下几点：

在原生端定义Module类,继承ReactContextBaseJavaModule,在Module类里,定义交互的方法.
定义Package类，继承ReactPackage,将Module实例添加到集合.
在android继承的ReactApplication,回调实现getPackages方法，将Package实例添加到getPackages下的集合。

如下是Mudule类的实例代码，为了方便大家理解，我把代码全部贴出来，在一一讲解。

import android.support.annotation.Nullable;
import android.widget.Toast;

import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;

import java.util.HashMap;
import java.util.Map;

public class ToastExample extends ReactContextBaseJavaModule{
    private static final String LONG_TIME = "LONG";
    private static final String SHORT_TIME = "SHORT";
    private static final String MESSAGE = "MESSAGE";

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

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

    @ReactMethod
    public void getDataFromIntent(Callback callback){
        try{
            Activity currentActivity=getCurrentActivity();
            String result =currentActivity.getIntent().getStringExtra("data");
            if(TextUtils.isEmpty(result)){
                callback.invoke("no_data");
            }else{
                callback.invoke(result);
            }
        }catch (Exception e){
            callback.invoke("error");
        }
    }

    @Override
    public Map<String, Object> getConstants() {
        //让js那边能够使用这些常量
        Map<String,Object> constants = new HashMap<>();
        constants.put(LONG_TIME, Toast.LENGTH_LONG);
        constants.put(SHORT_TIME,Toast.LENGTH_SHORT);
        constants.put(MESSAGE,"getConstants");
        return constants;
    }

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

    @ReactMethod
    public void sendEvent(){
        onScanningResult();
    }

    @ReactMethod
    public void testAndroidCallbackMethod(String msg, Callback callback){
        Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_LONG).show();
        callback.invoke("abc");
    }

    @ReactMethod
    public void textAndroidPromiseMethod(String msg, Promise promise){
        Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_SHORT).show();
        String result="谢汉杰";
        promise.resolve(result);
    }

    public void onScanningResult(){
        WritableMap params = Arguments.createMap();
        params.putString("key", "myData");
        sendEvent(getReactApplicationContext(),"EventName",params);
    }

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

    public void nativeCallRn(){
        onScanningResult();
    }

    @Override
    public boolean canOverrideExistingModule() {
        return true;
    }

}

在上面的Module代码中,getName()方法返回的名字是是在RN代码里面是需要这个名字来调用该类的方法,而@ReactMethod注解下的方法是我们自定义方法,表明这个方法可以被rn调用.至于上面四种形式的方法等步骤走完详解。

自定义ReactPackage 代码如下：

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class ExampleReactNativePackage implements ReactPackage{

    public ToastExample toastExample;

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

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

}

这一步很简单，就是把上面的ToastExample类加入NativeModule而已

接着第三步也很简单，代码如下

import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import java.util.Arrays;
import java.util.List;

public class MyApplication extends Application implements ReactApplication{

    public static final ExampleReactNativePackage exampleReactNativePackage=new ExampleReactNativePackage();

    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(),
                    exampleReactNativePackage
            );
        }

    };

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

}

这也不也只是把ExampleReactNativePackage添加进ReactPackage而已，也很简单。

为此整个Android原生端已经完成编写。接着就是编写js端，下面也是js端的实例:(说句废话，我一般喜欢贴全部代码在一一讲解,这样比较连贯)

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  ToastAndroid,
  NativeModules,
  DeviceEventEmitter
} from 'react-native';

export default class HelloWorld extends React.Component {

    constructor(props){
        super(props);
        this.state={
             text1:'ToastForAndroid',
             text2:'testAndroidCallbackMethod',
             text3:'textAndroidPromiseMethod',
             text4:'DeviceEventEmitter',
             text5:'getValue',
             data:'no_data',
        }
    }

    componentWillMount() {
        DeviceEventEmitter.addListener('EventName', function  (msg) {
            console.log(msg);
            let rest=NativeModules.ToastForAndroid.MESSAGE;
            ToastAndroid.show("DeviceEventEmitter收到消息:" + "\n" + rest, ToastAndroid.SHORT)
        });
        NativeModules.ToastForAndroid.getDataFromIntent((result)=>{
            this.setState({data:result});
        });
    }

   render() {
     return (
          <View style={styles.container}>
           <Text>{this.state.data}</Text>
           <TouchableOpacity onPress={this._onPressButton.bind(this)}>
                 <Text style={styles.hello}>{this.state.text1}</Text>
           </TouchableOpacity>
           <TouchableOpacity onPress={this._onPressButton2.bind(this)}>
                 <Text style={styles.hello}>{this.state.text2}</Text>
            </TouchableOpacity>
           <TouchableOpacity onPress={this._onPressButton3.bind(this)}>
                 <Text style={styles.hello}>{this.state.text3}</Text>
           </TouchableOpacity>
           <TouchableOpacity onPress={this._onPressButton4.bind(this)}>
                 <Text style={styles.hello}>{this.state.text4}</Text>
           </TouchableOpacity>
           <TouchableOpacity onPress={this._onPressButton5.bind(this)}>
                 <Text style={styles.hello}>{this.state.text5}</Text>
           </TouchableOpacity>
          </View>
        )
   }

   _onPressButton(){
        NativeModules.ToastForAndroid.show(1000);
   }

    _onPressButton2(){
        NativeModules.ToastForAndroid.testAndroidCallbackMethod("HelloJack",(result)=>{
           this.setState({text:result});
       });
    }

    _onPressButton3(){
       NativeModules.ToastForAndroid.textAndroidPromiseMethod("abcx").then((result)=>{
                 this.setState({text3:result});
             }).catch((error)=>{
                 this.setState({text:'error'});
             })
    }

    _onPressButton4(){
        NativeModules.ToastForAndroid.sendEvent();
    }

    _onPressButton5(){
         ToastAndroid.show(NativeModules.ToastForAndroid.MESSAGE, ToastAndroid.SHORT)
    }

}

   var styles = StyleSheet.create({
     container: {
        flex: 1,
        justifyContent: 'center',
        flexDirection: 'column',
      },
      hello: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
    });

AppRegistry.registerComponent('HelloWorlds', () => HelloWorld);

这就是整个js端的调用实例。在React Naitve层，RN端可通过 NativeModules.[module名].[方法名]来调起原生的方法，同时也可以通过RN端可通过 NativeModules.[module名].[参数名]的方式来获取传递的参数，具体用法如上代码。

而对于原生调用调用React Native里面的方法，我们可以用RCTDeviceEventEmitter的方式，这种方式就相当于我们Android中的广播，具体对应的原生代码如下：

MyApplication.exampleReactNativePackage.toastExample.nativeCallRn();

和上面的代码也是连贯一起的。

最后总结交互的四种方式

第一种最简单，如上面代码的

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

即用ReactMethod注解方法就可以调用原生了

Callback 回调方式，如上面代码的

 @ReactMethod
 public void testAndroidCallbackMethod(String msg, Callback callback){
    Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_LONG).show();
        callback.invoke("abc");
}

对应的js代码就是

 _onPressButton2(){
    NativeModules.ToastForAndroid.testAndroidCallbackMethod("HelloJack",(result)=>{
           this.setState({text:result});
    });
}

即你传入参数进行操作然后给你回调结果

3.Promise 回调方式类似的就是RxJava.可以通过链式将复杂代码结构转换为简短易读的代码.，如上面代码的

@ReactMethod
    public void textAndroidPromiseMethod(String msg, Promise promise){
        Toast.makeText(getReactApplicationContext(),msg,Toast.LENGTH_SHORT).show();
        String result="谢汉杰";
        promise.resolve(result);
    }

对应的js代码就是

 _onPressButton3(){
       NativeModules.ToastForAndroid.textAndroidPromiseMethod("abcx").then((result)=>{
                 this.setState({text3:result});
             }).catch((error)=>{
                 this.setState({text:'error'});
             })
    }

JS端通过then接口来获取Promise的数据,执行错误就返回error信息

通过事件方式：RCTDeviceEventEmitter，一般是native原生调用React Native 相当于广播。对应上面代码如下：

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

对应的js代码就是

  DeviceEventEmitter.addListener('EventName', function  (msg) {
            console.log(msg);
            let rest=NativeModules.ToastForAndroid.MESSAGE;
            ToastAndroid.show("DeviceEventEmitter收到消息:" + "\n" + rest, ToastAndroid.SHORT)
    });

Native发送原生事件然后React Native 注册监听获取信息。

在这里举一个我们实战的一个例子，就是启动RN界面并且传递数据。怎么做呢，刚开始的初学者还是一下子反应不过来，起始也很简单，充分运用我们上面的例子就行了，
首先原生启动代码

Intent intent=new Intent(MainActivity.this,HelloReactActivity.class);
intent.putExtra("data","HelloJack");
startActivity(intent);

最终要的是是在上面的ToastExample类里加入

 @ReactMethod
    public void getDataFromIntent(Callback callback){
        try{
            Activity currentActivity=getCurrentActivity();
            String result =currentActivity.getIntent().getStringExtra("data");
            if(TextUtils.isEmpty(result)){
                callback.invoke("no_data");
            }else{
                callback.invoke(result);
            }
        }catch (Exception e){
            callback.invoke("error");
        }
    }

然后在RN端获取即可

NativeModules.ToastForAndroid.getDataFromIntent((result)=>{
    this.setState({data:result});
});

同理其他情况请参考RN之Android:原生界面与React界面的相互调用及数据传递,这也是我的参考之一。

最后献上大家最期待的源码https://github.com/jack921/ReactNativeParam还有什么不明白就开源码吧

React Native与Android 原生通信

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React Native开发

Android开发经验谈

Android开发

React-Native系列

Android进阶

React Native学习

react-native