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 {@Overridepublic 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();}@Overridepublic 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);}@Overridepublic String getName() {return REACTCLASSNAME;}/*** 必须添加反射注解不然会报错* 这个方法就是ReactNative将要调用的方法，会通过此类名字调用* @param*/@ReactMethodpublic 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

Android原生App跳转到React Native App相关推荐

React Native App设置amp;Android版发布
React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native ...
什么是 Native、Web App、Hybrid、React Native 和 Weex？
(点击上方公众号,可快速关注) 来源:zwwill_木羽 segmentfault.com/a/1190000011154120 一句话概要 Native.Web App.Hybrid.React N ...
什么是 Native、Web App、Hybrid、React Native和Weex？
一句话概要 Native.Web App.Hybrid.React Native(后面以RN简称).Weex 间的异同点,后期同步小程序和PWA. App常用开发模式简介此处App为应用,appli ...
快速创建React Native App
告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了. 快速创建React Native App 查看最新的React Native ...
手机app开发可选技术——React Native
百度百科 React Native是Facebook于2015年开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架React在原生移动应用平台的衍生产物,支持IOS和安卓两大平台.RN ...
开发 React Native APP —— 从改造官方Demo开始（2）
还是摘自L小庸的文章,加入了一点个人的实践和理解经过第一部分开发 React Native APP -- 从改造官方 Demo 开始(1)介绍,App 框架基本构建完成,这部分主要关注 UI/交互. ...
【天赢金创】Facebook:我们是如何构建第一个跨平台的React Native APP
今年早些时候,我们介绍过iOS版的React Native. React Native带来的是用web方式的React - 自声明式的UI组件和快速的开发迭代来完成手机平台的功能,然后为了保持速度.保 ...
利用 Create React Native App 快速创建 React Native 应用
React Native App简介打开React Native官方文档你会发现,在Getting Started章节下新添加一个Quick Start Tab页.Quick Start是在v0.4 ...
开始测试React Native App（下篇）
前言: 在开始测试React Native App(上篇)中编写了redux-upload-queue针对Reducer和Action Creator的单元测试,测试代码可以在这里查阅.这篇文章基于开 ...

Android原生App跳转到React Native App

Android原生App跳转到React Native App相关推荐

最新文章

热门文章