React Native与Android原生通信

最新推荐文章于 2022-09-27 11:44:09 发布

慕天远

最新推荐文章于 2022-09-27 11:44:09 发布

阅读量460

点赞数

本文链接：https://blog.csdn.net/Cui_xing_tian/article/details/103615144

版权

本文介绍了在React Native混合开发中如何实现原生模块与JS的通信交互，包括在原生端定义Module和Package，以及在JavaScript端调用原生方法。详细讲解了四种通信方式：ReactMethod注解、Callback回调、Promise和事件方式(RCTDeviceEventEmitter)。并提供了一个实战例子，展示如何从Android原生界面启动RN界面并传递数据。

摘要由CSDN通过智能技术生成

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

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

1. 在原生端定义Module类继承ReactContextBaseJavaModule，在Module类里定义交互的方法。

2. 定义Package类，继承ReactPackage，将Module实例添加到集合。

3. 在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