今天看到 react-native 的官方 doc 上放出了最新的文档，正巧是介绍题目描述的问题，不过具体的方法还是参考这篇文档。所以可以直接去官网看文档。这里只是作为自己项目中的一个记录。
背景
承接上一篇介绍的 react-native 和已有 APP 之间的双向通信问题，本篇介绍另一个方向的通信，即：appCon -> appChild。
实现
思路是在 js 代码中订阅一个事件并绑定事件处理函数，然后在 native 代码中触发该事件。以下是在 native 中触发时间的代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#import "RCTBridge.h" #import "RCTEventDispatcher.h" @implementation JZTestManager @synthesize bridge = _bridge; - (void)handleDidClickHyperLinkNotificaiton:(NSNotification *)notification { NSString *eventName = notification.userInfo[@"name"]; [self.bridge.eventDispatcher sendAppEventWithName:@"onOrderHelperClick" body:@{@"order_url": order_url}]; } @end |
上面代码触发onOrderHelperClick事件，并且传递参数订单链接order_url。在 js 代码中相应添加对应事件订阅代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var React = require('react-native'); var TestMod = React.NativeModules.MLSShopVCUtility; var NativeAppEventEmitter = React.NativeAppEventEmitter; var subscription = null class MenuBar extends React.Component { constructor(props) { super(props); subscription = NativeAppEventEmitter.addListener( 'onOrderHelperClick', (reminder) => { ... // 获取订单链接及其它业务处理 } ); } componentWillUnmount() { subscription && subscription.remove(); } } |
这样只要在 native 中执行上述代码，js 中就能捕获事件并获取参数，然后执行事件处理函数。
最后
大部分内容和思想在官方文档中都有提及，本文只是结合笔者自己项目简单记录实现思想。另，由于 react-native 的更新很快，不保证接口或者通信的机制不发生变化。一切还应以最新的 doc 为准，笔者使用的 rn 版本为0.14.2。
注：转载注明出处并联系作者，本文链接：https://nodefe.com/communication-between-ios-and-react-native-two/