一個RNDemo(React Native 0.57.3 + ES6)實現(包含RN與原生相互跳轉和通訊)

原始碼下載地址
RNDemo(RN0.57.3+ES6)

iOS原生專案(Objective-C)整合React Native(0.57.3版本)圖文教程–(1)基本環境

iOS原生專案(Objective-C)整合React Native(0.57.3版本)圖文教程–(2)整合過程

一個RNDemo(React Native 0.57.3 + ES6)實現(包含RN與原生相互跳轉和通訊)

iOS原生介面與RN介面互調及傳值

增加RN跳原生,原生跳RN介面,以及RN和原生跳同一個RN介面,返回鍵的處理

RN跳原生

RN頁面
1.匯入NativeModules模組
import {
    NativeModules
} from 'react-native';
2.建立變數
var nativeModule = NativeModules.OpenNativeModule;
3.點選事件
onPress={this.jumpToNative}
4.跳轉到原生介面
jumpToNative() {
    nativeModule.openNativeVC()
}

iOS原生介面
1.建立橋接類.h,遵守RCTBridgeModule協議

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


@interface OpenNativeModule : NSObject <RCTBridgeModule>

@end

#import "OpenNativeModule.h"
#import "AppDelegate.h"
#import "ZYViewController.h"

@implementation OpenNativeModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(openNativeVC) {
    dispatch_async(dispatch_get_main_queue(), ^{
        AppDelegate *delegate = (AppDelegate *)([UIApplication sharedApplication].delegate);
        UINavigationController *rootNav = delegate.navigationController;
        //要跳轉的原生介面
        ZYViewController *nativeVC = [[ZYViewController alloc] init];
        [rootNav pushViewController:nativeVC animated:YES];
    });
}

@end

2.原生介面
- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    self.navigationController.navigationBar.hidden = NO;
}

- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];
    self.navigationController.navigationBar.hidden = YES;
}

 

RN和原生跳轉同一個RN介面,和返回鍵處理

1.在index.js同目錄下重新建立一個js檔案NewIndex.js,引用需要跳轉到的RN介面的ZYHomeShopCenterDetail.js

import React, { Component } from 'react';

import {
    AppRegistry,
} from 'react-native';

import ShopCenterDetail from "./js/News/ZYHome/ZYHomeShopCenterDetail";

export default class RNDemo extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedTabBarItem: "contacts"
        };
    };

    render() {
        return (
            <ShopCenterDetail/>
        );
    }
}

AppRegistry.registerComponent('RNDemo', () => RNDemo);


2.建立新的原生介面引用需要跳轉到的RN介面,用來展示此RN介面(RN跳RN就不用關心了)
#import "ZYRNViewController.h"
#import <React/RCTRootView.h>

@interface ZYRNViewController ()

@end

@implementation ZYRNViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    NSURL *url = [NSURL URLWithString:@"http://localhost:8081/NewIndex.bundle?platform=ios&dev=true"];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:url moduleName:@"RNDemo" initialProperties:nil launchOptions:nil];
    self.view = rootView;
}

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    self.navigationController.navigationBar.hidden = YES;
}

- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];
    self.navigationController.navigationBar.hidden = NO;
}

@end

3.原生跳轉到此RN介面
- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"原生介面";

    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"原生2RN" style:UIBarButtonItemStyleDone target:self action:@selector(jumpToNewRNPage)];
}

- (void)jumpToNewRNPage {
    [self.navigationController pushViewController:[[ZYRNViewController alloc] init] animated:YES];
}

4.RN跳轉到此RN介面
//跳轉到二級頁面
pushToShopCenterDetail(data) {
    if (data != null) {
        this.props.navigator.push(
            {
                component: ShopCenterDetail,
                title: "購物中心詳情頁",
                passProps: {
                    "url": this.detalWithUrl(data),
                    "isFromNative": false
                }
            }
        );
    }
}

5.新的RN頁面返回按鈕的處理
//增加屬性標識,是來源於RN介面還是來源於原生介面
static defaultProps = {
    isFromNative: null
}

//返回判斷處理,RN跳轉來源和原生跳轉來源
popToView() {
    if (this.props.isFromNative !== null) {
        this.props.navigator.pop()
    } else {
        nativeModule.popToViewController()
    }
}

6.新的RN介面返回的原生介面通訊,在OpenNativeModule增加通訊方法
RCT_EXPORT_METHOD(popToViewController) {
    dispatch_async(dispatch_get_main_queue(), ^{
        AppDelegate *delegate = (AppDelegate *)([UIApplication sharedApplication].delegate);
        [delegate.navigationController popViewControllerAnimated:YES];
    });
}


 

效果圖