Android - React-native在原生MainAct
React-native在MainActivity中发送消息给前端
目前,一些App都会集成推送的功能,很多需求中需要在非Module下的文件里发送消息给前端,但是我查找了网上的资料,没有讲在MainActivity类似的文件中获取到ReactContext的方法,固记录下来,供大家参考。
获取MainActivity中的ReactContext
- 1、 MainActivity 需要继承 ReactActivty
public class MainActivity extends ReactActivity {
}
- 2、 通过获取ReactNativeHost类去获取ReactContext
ReactContext currentReactContext =
this.getReactNativeHost().getReactInstanceManager().getCurrentReactContext();
- 3、 通过ReactContext对象发送消息给前端
// 其中 eventName 是发送给前端的消息名称、 msgMap 发送给前端的参数
currentReactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName,msgMap);
- 4、 前端接收消息
import { NativeAppEventEmitter } from 'react-native';
NativeAppEventEmitter.addListener(eventName, (msgMap) => {
// doSomeThing
});
以上四步就完成了,Android原生端发消息给react native了~
有问题,欢迎私聊or评论 指正和交流~
2020.03.08 更新
以上方法,虽然能完成Android端发送监听消息给JS端,但是有小伙伴遇到了reactContext为null的情况,固说明下原因:
reactContext为null 是因为jsBundle没有完成加载(即没有完成初始化)
原理上大家可以了解下React-native的加载流程,是在我们ReactActivity里面的super.onCreate方法,通过代理类去完成jsBridge的初始化和jsBundle内容的加载,这个过程也包含ReactContext的初始化。
推送消息,点击离线消息在App的处理方式
-
(推荐方式) 原生存储消息,JS端主动查询消息
这种方式比较简单粗暴,直接将离线消息通过静态变量、SP、Sqlite等方式存储到本地,
添加原生获取这些离线消息的调用方法,JS端去调用该方法获取离线消息,在JS端做相应处理
2、 (推荐方式) 原生端设置JS端初始化配置内容(离线消息),JS端读取初始化配置
这种方式相对正规,但是略微繁琐,首先要在原生层面设置初始化内容,重新我们ReactActivity的createReactActivityDelegate方法,传入一个ReactActivityDelegate对象,重写ReactActivityDelegate对象的getLaunchOptions方法,传入离线消息内容(bundle格式 key/value值),原生层面到此就结束了;JS端通过注册的组件this.props. 加上你传入的key的值获取在bundle中放入的对应value值,最后进行相应处理
3、纯原生处理,不涉及JS端
这个就不用说了,做过Android开发的都知道,通过广播绑定的通知栏,点击通知栏,触发广播携带消息吊起我们的Activity,通过Intent获取离线消息内容直接处理即可
最后,还是欢迎大家一起交流Android、React Native的内容~