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

基础:iOS原生项目集成reactnative(可参考我的这篇文章//www.greatytc.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');

    }

<TouchableOpacity style={styles.textBg} onPress={() =>this.activeEvent()}>

            <Text style={styles.contentText}>RN调用OC(无结果返回)></Text>

</TouchableOpacity>

2)ios原生部分

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

.m文件先#import <React/RCTBridgeModule.h>

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)//返回的数据

                               }

                               });

    }

<TouchableOpacity style={styles.textBg} onPress={() =>this.callOChaveResult()}>

        <Text style={styles.contentText}>RN调用OC(无结果返回)</Text>

<TouchableOpacity>

以上为主要代码,下面给出我这边测试写的布局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

                },

})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容