上一篇文章記錄了，在原生項(xiàng)目中如何集成RN頁面，既然有頁面就肯定有交互，這篇文章記錄下RN和原生頁面的交互，本質(zhì)上是利用通知的形式進(jìn)行交互！

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

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

2、得到響應(yīng)者：

var RNModules = NativeModules.RTModules;

里面的RTModules是需要跟原生頁面約定好的響應(yīng)者（也可以是原生頁面的類名）

3、添加響應(yīng)事件：

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

其中RNModules.RNOpenOneVCa中的RNOpenOneVCa是要跟原生界面約定好的響應(yīng)方法

原生頁面：

1、在需要監(jiān)聽的類中引入類

#import "RCTBridgeModule.h"

2、遵循協(xié)議：<RCTBridgeModule>

@interface BMCRNModules : NSObject<RCTBridgeModule>

3、RN提供了監(jiān)聽通知的宏：

RCT_EXPORT_MODULE(RTModules)

其中RTModules是需要跟RN里面NativeModules約定好的響應(yīng)者（此處也可以為空，如果為空的話，在RN頁面的對(duì)應(yīng)位置就寫上該類的類名）！

然后在宏RCT_EXPORT_METHOD里面寫好響應(yīng)代碼：

RCT_EXPORT_METHOD(RNOpenOneVCa:(NSString *)msg){

    NSLog(@"RN傳入原生界面的數(shù)據(jù)為:%@  %@",msg,[NSThread currentThread]);
    //主要這里必須使用主線程發(fā)送,不然有可能失效
    dispatch_async(dispatch_get_main_queue(), ^{
        [[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenOneVC" object:msg];
    });
}

其中RNOpenOneVCa是跟RN約定好的響應(yīng)方法！

最終代碼：
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('測(cè)試') }>
               <Text>Hello World!</Text>
            </TouchableOpacity>
        <TouchableOpacity onPress={ ()=>RNModules.RNOpenOneVC('測(cè)試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跳轉(zhuǎn)原生界面
RCT_EXPORT_METHOD(RNOpenOneVCa:(NSString *)msg){

    APP_LOG_INFO(@"RN傳入原生界面的數(shù)據(jù)為:%@  %@",msg,[NSThread currentThread]);
    //主要這里必須使用主線程發(fā)送,不然有可能失效
    dispatch_async(dispatch_get_main_queue(), ^{
        [[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenOneVC" object:msg];
    });
}
//RN跳轉(zhuǎn)原生界面1
RCT_EXPORT_METHOD(RNOpenOneVC:(NSString *)msg){

    APP_LOG_INFO(@"RN傳入原生界面的數(shù)據(jù)為:%@  %@",msg,[NSThread currentThread]);
    //主要這里必須使用主線程發(fā)送,不然有可能失效
    dispatch_async(dispatch_get_main_queue(), ^{
        [[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenOneVC" object:msg];
    });
}