RN与iOS原生交互(交互)

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 (
      
        
          React Native 调用原生方法!
        
        
          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,
  },
});