ReactNative与原生页面的交互

上一篇文章记录了，在原生项目中如何集成RN页面，既然有页面就肯定有交互，这篇文章记录下RN和原生页面的交互，本质上是利用通知的形式进行交互！

RN页面：
1、在RN页面的import里面添加引入NativeModules

import {  
    AppRegistry, 
    StyleSheet,  
    Text,  
    View, 
    TouchableOpacity,  
    NativeModules
} from 'react-native';

2、得到响应者：

var RNModules = NativeModules.RTModules;

里面的RTModules是需要跟原生页面约定好的响应者（也可以是原生页面的类名）

3、添加响应事件：

class credit extends Component {
    render() {   
        return (      
            <View style={styles.container}>
            <TouchableOpacity onPress={ ()=>RNModules.RNOpenOneVCa('测试') }>
               <Text>Hello World!</Text>
            </TouchableOpacity>
        <TouchableOpacity onPress={ ()=>RNModules.RNOpenOneVC('测试111') }>
               <Text>Hello World!</Text>
            </TouchableOpacity>
          </View> 
    );  
    }
}

其中RNModules.RNOpenOneVCa中的RNOpenOneVCa是要跟原生界面约定好的响应方法

原生页面：

1、在需要监听的类中引入类

#import "RCTBridgeModule.h"

2、遵循协议：<RCTBridgeModule>

@interface BMCRNModules : NSObject<RCTBridgeModule>

3、RN提供了监听通知的宏：

RCT_EXPORT_MODULE(RTModules)

其中RTModules是需要跟RN里面NativeModules约定好的响应者（此处也可以为空，如果为空的话，在RN页面的对应位置就写上该类的类名）！

然后在宏RCT_EXPORT_METHOD里面写好响应代码：

RCT_EXPORT_METHOD(RNOpenOneVCa:(NSString *)msg){

    NSLog(@"RN传入原生界面的数据为:%@  %@",msg,[NSThread currentThread]);
    //主要这里必须使用主线程发送,不然有可能失效
    dispatch_async(dispatch_get_main_queue(), ^{
        [[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenOneVC" object:msg];
    });
}

其中RNOpenOneVCa是跟RN约定好的响应方法！

最终代码：
RN：

import React, { Component } from 'react';
import {  
    AppRegistry, 
    StyleSheet,  
    Text,  
    View, 
    TouchableOpacity,  
    NativeModules
} from 'react-native';

var RNModules = NativeModules.RTModules;

class credit extends Component {
    render() {   
        return (      
            <View style={styles.container}>
            <TouchableOpacity onPress={ ()=>RNModules.RNOpenOneVCa('测试') }>
               <Text>Hello World!</Text>
            </TouchableOpacity>
        <TouchableOpacity onPress={ ()=>RNModules.RNOpenOneVC('测试111') }>
               <Text>Hello World!</Text>
            </TouchableOpacity>
          </View> 
    );  
    }
}

const styles = StyleSheet.create({ 
  container: {
    backgroundColor : 'red',
    height:100,
    flexDirection : 'row'
    },
});
AppRegistry.registerComponent('credit', () => credit);

原生代码：

RCT_EXPORT_MODULE(RTModules)
//RN跳转原生界面
RCT_EXPORT_METHOD(RNOpenOneVCa:(NSString *)msg){

    APP_LOG_INFO(@"RN传入原生界面的数据为:%@  %@",msg,[NSThread currentThread]);
    //主要这里必须使用主线程发送,不然有可能失效
    dispatch_async(dispatch_get_main_queue(), ^{
        [[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenOneVC" object:msg];
    });
}
//RN跳转原生界面1
RCT_EXPORT_METHOD(RNOpenOneVC:(NSString *)msg){

    APP_LOG_INFO(@"RN传入原生界面的数据为:%@  %@",msg,[NSThread currentThread]);
    //主要这里必须使用主线程发送,不然有可能失效
    dispatch_async(dispatch_get_main_queue(), ^{
        [[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenOneVC" object:msg];
    });
}