欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-04-26 17:53:51
android原生app跳转到react native app实现方法。 众所周知,react native开发是前几年较火的一个话题,随着各种框架的更新换代,一些技术也会逐渐被掩埋。本篇是楼主在项...

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