React Native与iOS原生交互(RN学习三)

基础:iOS原生项目集成reactnative(可参考我的这篇文章http://www.jianshu.com/writer#/notebooks/22019322/notes/23731074)

           不足之处请指出。

一:React Native调用ios代码,但无需返回值

1)RN部分

activeEvent(){//此方法写在index.js的组件渲染中

        var BridgeManager = require('react-native').NativeModules.BridgeManager;//BridgeManager为ios原生项目接收RN调用的类名

        BridgeManager.rnCallOCNative('Hello Victor ,I am RN call OC');

    }

this.activeEvent()}>

            RN调用OC(无结果返回)>

2)ios原生部分

新建BridgeManager(注意类名和RN中的保持一致)类,继承自NSObject  

.m文件先#import

RCT_EXPORT_MODULE();// 导出模块,不添加参数即默认为这个类名

RCT_EXPORT_METHOD(rnCallOCNative:(NSString*)testStr){

//在此方法中接受rn传递的参数即可

    NSLog(@"%@",testStr);/

}


二、React Native调用ios代码,需返回值

    callOChaveResult(){

        var BridgeManager = require('react-native').NativeModules.BridgeManager;

        BridgeManager.rnCallOCNativeHaveRes(('RN->原生的数据'),(error,events) => {

                               if(error) {

                               console.warn(error);

                               }else{

                               alert(events)//返回的数据

                               }

                               });

    }

this.callOChaveResult()}>

        RN调用OC(无结果返回)

以上为主要代码,下面给出我这边测试写的布局style

varstyles = StyleSheet.create({

                container: {

                        flex:1,

                        backgroundColor:"white",

                        justifyContent:'center',

                        alignItems:'center',

                },

                textBg:{

                               justifyContent:'center',

                               alignItems:'center',

                               width:200,

                               height:40

                },

                contentText: {

                        fontSize:17,

                        flex:1

                },

})

你可能感兴趣的:(React Native与iOS原生交互(RN学习三))