RN给原生传递参数

步骤：

1.用XCode打开一个已经存在的RN项目，即用XCode打开 项目文件夹/ios/***.xcodeproj文件。

2.在XCode下新建桥接文件TakeViewManager继承RCTEventEmitter(RCTEventEmitter用于向RN发送事件)，并在TakeViewManager.h文件中添加引用RCTBridgeModule实现RCTBridgeModule协议(这个协议使得RN可以调用IOS原生平台的方法)。

TakeViewManager.h代码如下：

#import

#import

#import

NS_ASSUME_NONNULL_BEGIN

@interface TakeViewManager : RCTEventEmitter

@end

NS_ASSUME_NONNULL_END

3.在TakeViewManager.m文件实现suppportEvents方法，这个方法返回一个RN回调事件的名称数组。有多少个事件，就写多少个名称。RN通过这些监听事件，从而实现IOS原生平台向RN发送事件。

TakeViewManager.m代码如下：

#import "TakeViewManager.h"

@implementation TakeViewManager

-(dispatch_queue_t)methodQueue{

//因为是显示页面，所以让原生接口运行在主线程

return dispatch_get_main_queue();

}

// RN的回调事件名称列表

-(NSArray *)supportedEvents{

return @[

@"returnRNData"

];

}

//发起通知事件

- (void)startObserving {

[[NSNotificationCenter defaultCenter] addObserver:self

selector:@selector(returnRNData)

name:@"returnRNData"

object:nil];

}

//结束通知事件

- (void)stopObserving {

[[NSNotificationCenter defaultCenter] removeObserver:self name:@"returnRNData" object:nil];

}

- (void)returnRNData{

[self sendEventWithName:@"returnRNData" body:@"从ios返回的内容"];

}

RCT_EXPORT_MODULE() // 导出桥接模块 默认模块名为当前class类名即TakeViewManager

RCT_EXPORT_METHOD(RNPushToNativeController:(NSString*)message){

NSLog(@"收到RN发来的消息:%@",message);

[self startObserving];

}

RCT_EXPORT_METHOD(RNPushToNativeControllerWithEvent:(NSString*)message){

NSLog(@"收到RN发来的消息:%@",message);

[self startObserving];

[self returnRNData];

}

4.在WebStrom中import NativeModules, NativeEventEmitter模块并使用 NativeEventEmitter.addListener模块监听通知。

App.js代码如下：

import React, {Component} from 'react';

import {Platform, StyleSheet, Text, View, NativeModules, NativeEventEmitter} from 'react-native';

type Props = {};

var NativeModulesByIOS = NativeModules.TakeViewManager;

const NativeNotificationMoudule = new NativeEventEmitter(NativeModulesByIOS)

export default class App extends Component {

constructor(props){

super(props);

this.state = {

global: '这是回调之前的信息',

subscription: '',

}

}

call_button(){

NativeModules.TakeViewManager.RNPushToNativeController('RN把值传给iOS原生');

this.setState({global: '这是回调之前的信息'});

}

callBack_button(){

NativeModules.TakeViewManager.RNPushToNativeControllerWithEvent('RN把值传给iOS原生');

}

componentWillMount() {

console.log('开始订阅通知...');

this.subscription = NativeNotificationMoudule.addListener(

'returnRNData',

(result) => {this.setState({global:result})}

);

}

componentWillUnmount() {

this.subscription.remove(); //移除通知

}

render() {

return (

onPress={this.call_button.bind(this)}

>

React Native 调用原生方法!

onPress={this.callBack_button.bind(this)}

>

React Native 调用原生方法，原生方法给RN回调!

{this.state.global}

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

instructions: {

textAlign: 'center',

color: 'red',

marginBottom: 5,

},

});