Android原生App跳转到React Native App

前言

众所周知，react native开发是前几年较火的一个话题，随着各种框架的更新换代，一些技术也会逐渐被掩埋。本篇是楼主在项目中总结出的一些开发经验。主要讲了react native和原生的app之间的通讯与沟通。

首先，react native的配置就不做赘述。具体可参考：

React Native中文网: https://reactnative.cn/docs/0.51/getting-started.html

里面讲述的很清晰，一步一步配下来就可以了。

在讲述原生跳转Rn App前，我先说一下两个原生的App之间的跳转，其实Rn和这个是大同小异。只不过是Rn在嵌入到原生中而已。app之间跳转传参其实在生活中很常见的，例如，我们通过一款应用调取地图App，并且将坐标传过去显示出来或者导航，支付调取支付宝App并且传递金额进行支付等。

App从一个App跳到另一个App

详情可参考：https://blog.csdn.net/hust_twj/article/details/73477454

Intent intent = new Intent();          
//可以设置另一个App的启动模式
intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);
//intent传参和activity跳转传参一样的
intent.putString("param", "param");
//参数1：要调用另一个APP的activity所在的包名
//参数2：要调用另一个APP的activity名字
intent.setClassName("com.xxx.xxx",
                    "com.xxx.xxx.MainActivity");
startActivity(intent);

App跳转到Rn App

React Natived的App其实最外层也是一个原生的页面里面嵌入了很多Rn的页面，你只需要将跳转到页面是Rn的mainActivity即可

那么剩余的工作就是Rn App原生层和Rn层怎么通讯了，解决了这一步就可以实现了跳转传参的问题了。

React native和原生通讯的方式主要有三种：

（1）RCTDeviceEventEmitter 事件方式

（2）Callback 回调方式

（3）Promises 方式

这里只讲述第二种模式；

详情可参考：https://blog.csdn.net/asddavid/article/details/53338616

先写一个react native的MyReactPackage,用来在Rn中注册该模块。代码如下：

public class MyReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

        List<NativeModule> modules=new ArrayList<>();
        modules.add(new MyNativeModule(reactContext));

        return modules;
    }


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

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

在写一个MyNativeModule,用于给Rn调用的方法

public class MyNativeModule extends ReactContextBaseJavaModule {

    public static final String REACTCLASSNAME = "MyNativeModule";

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

    @Override
    public String getName() {
        return REACTCLASSNAME;
    }

    /**
     * 必须添加反射注解不然会报错
     * 这个方法就是ReactNative将要调用的方法，会通过此类名字调用
     * @param
     */
    @ReactMethod
    public void callNativeMethod() {
        //调用Test类中的原生方法。
        //在这里写你要在Rn中需要原生中逻辑，比如传参或者其他方法等
        //注册一个方法在原生中调用
      reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("EventName", params);
   }
}

然后在Rn中的代码里，在自己想要获得参数或者调用原生中的方法的页面中调取callNativeMethod这个方法。

例如：在你的入口文件index.js中的生命周期中：

   componentDidMount() {
       this.EventNameListener = DeviceEventEmitter.addListener('EventName', this.onGetResult);
       NativeModules.MyNativeModule.callNativeMethod()
    }

上面再onGetResult方法中可以获得参数

onGetResult = (data) => {
    //data是传过来的参数
}

最后，附上源码

由于项目没有node_modules,要npm install一下

最后感谢：

https://blog.csdn.net/hust_twj/article/details/73477454

https://blog.csdn.net/asddavid/article/details/53338616