Android原生App跳转到React Native App实现方法

android原生app跳转到react native app实现方法。

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

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

react native中文网: https://reactnative.cn/docs/0.20/android-setup.html

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

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

app从一个app跳到另一个app

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 方式

这里只讲述第二种模式；

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

public class myreactpackage implements reactpackage {
    @override
    public list createnativemodules(reactapplicationcontext reactcontext) {

        list modules=new arraylist<>();
        modules.add(new mynativemodule(reactcontext));

        return modules;
    }


    public list> createjsmodules() {
        return collections.emptylist();
    }

    @override
    public list 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是传过来的参数
}