React-Native開(kāi)發(fā)經(jīng)常遇到需要使用跳轉(zhuǎn)原生界面或者要嵌入原生界面在RN界面中等等交互。此處記錄一下自己的一些處理方式
1.RN跳轉(zhuǎn)原生界面
2.RN嵌入原生界面
3.原生跳轉(zhuǎn)RN界面
RN跳轉(zhuǎn)原生界面
第一步 導(dǎo)出方法供RN調(diào)用
新建交互類(lèi)，如有該類(lèi)可忽略
.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTLog.h>
// RN調(diào)用原生的
@interface xkMerchantModule : NSObject<RCTBridgeModule>
@end
.m
#import "xkMerchantModule.h"
#import "NSObject+XKController.h"
#import "NativeController.h"
#define KEY_WINDOW [UIApplication sharedApplication].keyWindow
@interface xkMerchantModule()
@end
@implementation xkMerchantModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(pushNative)
{
dispatch_async(dispatch_get_main_queue(), ^{
NativeController *vc =[NativeController new];
[self.getCurrentUIVC.navigationController pushViewController:vc animated:YES];
});
}
@end
#######注：rn調(diào)用是不在主線程，需要回到主線程進(jìn)行UI操作，否則可能崩潰。
第二步 RN中調(diào)用方法
相應(yīng)界面導(dǎo)入原生交互模塊
import {Text, View, Button, NativeModules} from 'react-native';
使用原生提供的方法進(jìn)行跳轉(zhuǎn)
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Button
title="跳轉(zhuǎn)原生界面"
onPress={() => {
NativeModules.xkMerchantModule.pushNative();
}}
/>
</View>
);
}
}
對(duì)于RN跳轉(zhuǎn)的原生界面，原生界面返回時(shí)使用原生的pop就可以完成原生回到RN界面的功能
RN嵌入原生界面
在開(kāi)發(fā)一些需求時(shí)，可能有些界面必須使用原生界面。在某些場(chǎng)景，并不是RN跳轉(zhuǎn)到原生，而是原生界面嵌入到RN界面中，比如原生界面作為RN tabBar中的一個(gè)界面。
(具體細(xì)節(jié) 參考：https://github.com/crazycodeboy/RNStudyNotes)
第一步 將需要嵌入的界面/控制器 制作成RN的組件
rn無(wú)法將原生控制器直接嵌入，所以需要把嵌入的界面以UIView的形式創(chuàng)建。
創(chuàng)建橋接代碼
.h
#import <React/RCTViewManager.h>
@interface MyTableView : RCTViewManager
@end
.m
#import "MyTableView.h"
#import "FirstViewController.h"
@implementation MyTableView
RCT_EXPORT_MODULE()
- (UIView *)view {
FirstViewController *vc = [[FirstViewController alloc] init];
vc.backgroundColor = [UIColor redColor];
return vc;
}
@end
FirstViewController 其實(shí)是UIView
第二步 RN代碼中使用原生組件
新建組件類(lèi) MyTableView.js 導(dǎo)出原生的組件
import { requireNativeComponent } from 'react-native';
module.exports = requireNativeComponent('MyTableView', null);
使用
import MyTablView from './MyTableView'
class TablView extends React.Component {
render() {
return (
<MyTablView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
</MyTablView>
);
}
}
const TabNavigator = createBottomTabNavigator({
RN: { screen: RootStack },
Native: { screen: TablView },
});
原生跳轉(zhuǎn)RN界面
第一步 導(dǎo)出原生使用的界面
import {AppRegistry} from 'react-native';
import App from './nativeInsert';
import TestPage from './TestPage'
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent('TestPageName', () => TestPage);
導(dǎo)出TestPageName。有多少界面需要導(dǎo)出原生使用就寫(xiě)多少
第二步 原生加載RN界面
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"TestPageName"
initialProperties:nil
launchOptions:nil];
BaseRNViewController *rootViewController = [BaseRNViewController new]; rootViewController.view = rootView;
[self.navigationController pushViewController:rootViewController animated:YES];
});
第三步 處理RN pop回原生
通RN跳轉(zhuǎn)原生的思路一致，提供原生方法供RN調(diào)用
@interface xkMerchantModule()
@end
@implementation xkMerchantModule
RCT_EXPORT_MODULE();
RCT_EXPORT_METHOD(popNative)
{
dispatch_async(dispatch_get_main_queue(), ^{
[self.getCurrentUIVC.navigationController popViewControllerAnimated:YES];
});
}
@end
RN代碼中：
<Button title={"我是RN界面 p o p 回到原生界面" + this.props.itemId}
onPress={() => {
NativeModules.xkMerchantModule.popNative();
}}
/>
注：上述原生跳轉(zhuǎn)RN界面是最開(kāi)始的方案，確實(shí)是可以實(shí)現(xiàn)的，但是在調(diào)試時(shí)，每次由原生跳轉(zhuǎn)到RN時(shí)，都會(huì)重新加載JS資源，會(huì)出現(xiàn)白屏的現(xiàn)象。并且新的RN界面，和最初的RN界面的環(huán)境不一致，RN內(nèi)部無(wú)法獲取之前的全局配置以及緩存信息。
所以需要有兩個(gè)優(yōu)化點(diǎn)：
1.提前加載資源
2.保證RN環(huán)境的一致。
如果對(duì)于RN項(xiàng)目，Appdelegate里已經(jīng)調(diào)用了下面方法了加載過(guò)了資源一次。
- (instancetype)initWithBundleURL:(NSURL *)bundleURL
moduleName:(NSString *)moduleName
initialProperties:(NSDictionary *)initialProperties
launchOptions:(NSDictionary *)launchOptions
{
RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:bundleURL
moduleProvider:nil
launchOptions:launchOptions];
return [self initWithBridge:bridge moduleName:moduleName initialProperties:initialProperties];
}
查看源碼內(nèi)部，其實(shí)創(chuàng)建了一個(gè)橋接類(lèi)RCTBridge *bridge。
這里我們可以將該bridge保存下來(lái)，
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"xkMerchant"
initialProperties:nil
launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
[ReactRootViewManager manager].bridge = rootView.bridge;
下次使用bridge加載新的rootView，也就是RN提供給我們的下列方法創(chuàng)建。即可解決重新加載時(shí)間長(zhǎng)和環(huán)境不一致的問(wèn)題。
- (instancetype)initWithBridge:(RCTBridge *)bridge
moduleName:(NSString *)moduleName
initialProperties:(NSDictionary *)initialProperties NS_DESIGNATED_INITIALIZER;
RCTRootView * rnView = [[RCTRootView alloc] initWithBridge:[ReactRootViewManager manager].bridge
moduleName:viewName
initialProperties:initialProperty];
如果對(duì)于原生項(xiàng)目想集成RN，進(jìn)行部分頁(yè)面跳轉(zhuǎn)。實(shí)現(xiàn)邏輯同理，在使用之前，
先調(diào)用RCTBridge初始化方法，提前加載資源，再緩存bridge即可。
[[RCTBridge alloc] initWithBundleURL:bundleURL
moduleProvider:nil
launchOptions:launchOptions];
