通过ReactNative 跳转iOS页面 (RN和iOS通信)

一、无回调通信
1.第一步 在iOS工程里面创建一个对象RNToNativeManager 并遵循RCTBridgeModule协议(需要引入#import <React/RCTBridgeModule.h> #import <React/RCTLog.h>头文件)

#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>

@interface RNToNativeManaer : NSObject<RCTBridgeModule>

@end

第二步 在.m文件需要包含RCT_EXPORT_MODULE()宏,而且要在RCT_EXPORT_METHOD这个宏里面跑出来供javaScript调用的方法()(注意如果要在这个方法里面操作view要回到主线程)

#import "RNToNativeManaer.h"

@implementation RNToNativeManaer
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location){
    RCTLogInfo(@"creat an event%@ at %@",name,location);
    [[NSNotificationCenter defaultCenter]postNotificationName:@"push" object:self];
   
}
@end

第三步 在js端调用native跑出来的这个方法(这里要引入NativeModules)

var RNToNativeManaer = NativeModules.RNToNativeManaer;

class App extends Component{
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            w:100,
            h:100,
        };
        this.handlePress=this.handlePress.bind(this);
    }

    handlePress(){
        RNToNativeManaer.addEvent(' Party','street');

    }
    render(){
        return(
            <View style={styles.container}>

            <TouchableOpacity onPress={this.handlePress}><Text >123</Text></TouchableOpacity>
            </View>

    );
    }
}

在这里要注意: Javascript方法名
导出到Javascript的方法名是Objective-C的方法名的第一个部分。React Native还定义了一个RCT_REMAP_METHOD()宏,它可以指定Javascript方法名。当许多方法的第一部分相同的时候用它来避免在Javascript端的名字冲突。且桥接到Javascript的方法返回值类型必须是void。
二、回调函数通信
回调函数RCTResponseSenderBlock,它可以把返回值传给javaScript.
native跑出来的方法如下

RCT_EXPORT_METHOD(findEvents:(RCTResponseSenderBlock)callBack){

    NSArray *array =@[@"1",@"2"];
    callBack(@[[NSNull null],array]);
}

reactNative端代码
把上面的handlePress函数内容替换如下就可以了

handlePress(){
        // RNToNativeManaer.addEvent(' Party','street');
        RNToNativeManaer.findEvents((error,events)=>{
            if (error){
                console.log(error);
            }else {
                console.log(events);
                this.setState({
                    event:events,
                });
            }

        });
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容