React Native 参数传递

总结

方式	说明
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 
#import 
#import 

@interface TravelRNModule : RCTEventEmitter 
@end

@implementation TravelRNModule
- (NSArray *)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 (
            {this.fireEvent}}>
                触发事件传值
            
        );
    }
    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

// 待续