总结
| 方式 | 说明 |
|---|---|
props |
props一般适用于父子页面通过 navigation导航时来传值RCTRootView初始化时initialProperties参数 |
NativeEventEmitter |
适用于native向js传值，也适用于js向js传值1）在 native的Module中指定事件名称2） js端监听事件，并处理3） native或者js端触发事件并传递参数，执行到上述2）中的监听 |
RCTDeviceEventEmitter |
简单易用 |
mobxjs、redux
|
专业的应用程序状态管理库 |
props 传值
props传值很简单，通常用于 navigation 父子页面间传值
NativeEventEmitter 传值
Native 声明支持 event
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTEventEmitter.h>
@interface TravelRNModule : RCTEventEmitter <RCTBridgeModule>
@end
@implementation TravelRNModule
- (NSArray<NSString *> *)supportedEvents
{
// 声明支持 `pageParameterEvent` 事件
return @[@"pageParameterEvent"];
}
@end
js 端监听事件
import React, { Component } from 'react';
import {
NativeEventEmitter,
EmitterSubscription,
NativeModules
} from 'react-native';
export default class MyComponent1 extends Component
{
nativeEventEmitter: NativeEventEmitter;
pageParameterEventSub: EmitterSubscription;
constructor(props)
{
super(props);
this.nativeEventEmitter = new NativeEventEmitter(NativeModules.TravelRNModule);
// 注册事件监听
this.pageParameterEventSub = this.nativeEventEmitter.addListener('pageParameterEvent', (parameters)=>{
// 接收事件参数并处理
console.log("receive native event: pageParameterEvent" + JSON.stringify(parameters));
});
}
}
native 端触发事件
[self sendEventWithName:@"pageParameterEvent" body:@{@"name": @"Troy"}];
js 端触发事件
import React, { Component } from 'react';
import {
NativeEventEmitter,
NativeModules
} from 'react-native';
export default class MyComponent2 extends Component
{
constructor(props)
{
super(props);
this.fireEvent = this.fireEvent.bind(this);
}
render()
{
return (
<TouchableOpacity onPress={()=>{this.fireEvent}}>
<Text>触发事件传值</Text>
</TouchableOpacity>
);
}
fireEvent()
{
let nativeEventEmitter = new NativeEventEmitter(NativeModules.TravelRNModule);
// 触发事件
nativeEventEmitter.emit("pageParameterEvent", {"name": "Troy"});
}
}
RCTDeviceEventEmitter
import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter';
// 监听事件
RCTDeviceEventEmitter.addListener("userUpdatedEvent",(o)=>{
console.log(JSON.stringify(o));
});
// 触发事件
RCTDeviceEventEmitter.emit("userUpdatedEvent", {"name": "Troy Zhang"});
mobxjs
// 待续
