美文网首页RN知识
RN-桥接文件(iOS)

RN-桥接文件(iOS)

作者: 精神病患者link常 | 来源:发表于2018-12-11 17:10 被阅读28次

    桥接文件 方法一:

    //
    //  RNBridge.h
    //  iOSInstallRN
    //
    //  Created by 尼古拉斯·常·穆罕默德 on 2018/8/31.
    //  Copyright © 2018年 CHJ. All rights reserved.
    //
    
    #import <Foundation/Foundation.h>
    #import <React/RCTBridgeModule.h>
    
    @interface RNBridge : NSObject<RCTBridgeModule>
    
    @end
    
    //
    //  RNBridge.m
    //  iOSInstallRN
    //
    //  Created by 尼古拉斯·常·穆罕默德 on 2018/8/31.
    //  Copyright © 2018年 CHJ. All rights reserved.
    //
    
    #import "RNBridge.h"
    #import <React/RCTBridge.h>
    
    @implementation RNBridge
    @synthesize bridge = _bridge;
    
    //导出模块
    RCT_EXPORT_MODULE();    //此处不添加参数即默认为这个OC类的名字
    
    // 在RN 中调用此方法,可传值
    RCT_EXPORT_METHOD(RNOpeniOSVC:(NSString *)msg){
        
        NSLog(@"RN传入原生界面的数据为:%@",msg);
        //主要这里必须使用主线程发送,不然有可能失效
        dispatch_async(dispatch_get_main_queue(), ^{
    // 在AppDelegate里面进行处理
            [[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpeniOSVC" object:nil];
        });
    }
    
    @end
    
    /** @format */
    
    import {AppRegistry, StyleSheet, Text, View, TextInput,TouchableOpacity,NativeModules} from 'react-native';
    
    import React, {Component} from 'react';
    import Mine from './mine';
    import Moment from './moment';
    
    const RNBridge = NativeModules.RNBridge;
    
    class Root extends Component {
        render() {
            return (
                <View style={styles.screenStyle}>
                    {
                        this.props.pageType === 'mine' ? <Mine/> : <Moment/>
                    }
                    <TouchableOpacity onPress={()=>RNBridge.RNOpeniOSVC('RN传递给iOS的参数')}>
                        <Text>Hello World!</Text>
                        <Text>点击跳转到 iOS 界面</Text>
                    </TouchableOpacity> 
                </View>
            );
        }
    }
    const styles = StyleSheet.create({
        screenStyle:{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        }
    })
    
    AppRegistry.registerComponent('iOSInstallRN', () => Root);
    
    

    桥接文件 方法二(推荐):

    新建桥接RNBridge.m文件(上一个方法是创建了.h、.m)

    重点⚠️@interface RCT_EXTERN_MODULE(RERNBridgeManager, NSObject)
    RERNBridgeManager具体的实现方法类,如果方法过多,可以新建RERNBridgeManager的分类进行解决
    #import <React/RCTBridgeModule.h>
    
    @interface RCT_EXTERN_MODULE(RNBridgeManager, NSObject) 
    
    // rn跳转到原生承载的rn
    RCT_EXTERN_METHOD(jumpScreen:(NSDictionary*)dic)
    //rn返回原生上一页
    RCT_EXTERN_METHOD(closeScreen)
    //rn返回原生根界面
    RCT_EXTERN_METHOD(closeScreenToRoot)
    // rn 返回上一级传值
    RCT_EXTERN_METHOD(closeScreenWithParams:(NSDictionary *)dic)
    
    
    @end
    
    
    import UIKit
    import React
    
    @objc(RNBridgeManager)
    class RNBridgeManager {
        
        //rn跳转到原生承载的rn
        @objc(presentScreen:)
        func presentScreen(dic: [AnyHashable : Any]) {
           //获取当前显示的控制器,然后进行跳转、返回等操作
        }
        
        //rn跳转到原生界面
        @objc(jumpIOSViewController:)
        func jumpIOSViewController(dic: [AnyHashable : Any]) {
           //获取当前显示的控制器,然后进行跳转、返回等操作
            
        }
        //MARK: - Public
        //rn返回原生上一页
        @objc(closeScreen)
        func closeScreen() {
           //获取当前显示的控制器,然后进行跳转、返回等操作
        }
        
        // RN返回上一级并传值
        @objc(closeScreenWithParams:)
        func closeScreenWithParams(params: Dictionary<String, Any>){
           //获取当前显示的控制器,然后进行跳转、返回等操作
        }
        
    
    }
    
    

    方法过多可以新建RNBridgeManager的分类

    相关文章

      网友评论

        本文标题:RN-桥接文件(iOS)

        本文链接:https://www.haomeiwen.com/subject/aseehqtx.html