React-Native開發(fā)經(jīng)常遇到需要使用跳轉(zhuǎn)原生界面或者要嵌入原生界面在RN界面中等等交互誓禁。此處記錄一下自己的一些處理方式
1.RN跳轉(zhuǎn)原生界面
2.RN嵌入原生界面
3.原生跳轉(zhuǎn)RN界面
RN跳轉(zhuǎn)原生界面
第一步 導(dǎo)出方法供RN調(diào)用
新建交互類，如有該類可忽略
.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)用是不在主線程肾档，需要回到主線程進行UI操作摹恰，否則可能崩潰。
第二步 RN中調(diào)用方法
相應(yīng)界面導(dǎo)入原生交互模塊
import {Text, View, Button, NativeModules} from 'react-native';
使用原生提供的方法進行跳轉(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>
);
}
}
對于RN跳轉(zhuǎn)的原生界面怒见，原生界面返回時使用原生的pop就可以完成原生回到RN界面的功能
RN嵌入原生界面
在開發(fā)一些需求時俗慈，可能有些界面必須使用原生界面。在某些場景遣耍，并不是RN跳轉(zhuǎn)到原生闺阱，而是原生界面嵌入到RN界面中，比如原生界面作為RN tabBar中的一個界面舵变。
(具體細節(jié) 參考：https://github.com/crazycodeboy/RNStudyNotes)
第一步 將需要嵌入的界面/控制器 制作成RN的組件
rn無法將原生控制器直接嵌入酣溃，所以需要把嵌入的界面以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 其實是UIView
第二步 RN代碼中使用原生組件
新建組件類 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)出原生使用就寫多少
第二步 原生加載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界面是最開始的方案扛或，確實是可以實現(xiàn)的，但是在調(diào)試時碘饼，每次由原生跳轉(zhuǎn)到RN時熙兔，都會重新加載JS資源，會出現(xiàn)白屏的現(xiàn)象艾恼。并且新的RN界面住涉，和最初的RN界面的環(huán)境不一致，RN內(nèi)部無法獲取之前的全局配置以及緩存信息钠绍。
所以需要有兩個優(yōu)化點：
1.提前加載資源
2.保證RN環(huán)境的一致舆声。
如果對于RN項目，Appdelegate里已經(jīng)調(diào)用了下面方法了加載過了資源一次五慈。
- (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)部纳寂，其實創(chuàng)建了一個橋接類RCTBridge *bridge。
這里我們可以將該bridge保存下來泻拦，
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)建。即可解決重新加載時間長和環(huá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];
如果對于原生項目想集成RN腋粥，進行部分頁面跳轉(zhuǎn)。實現(xiàn)邏輯同理架曹，在使用之前隘冲，
先調(diào)用RCTBridge初始化方法，提前加載資源绑雄，再緩存bridge即可展辞。
[[RCTBridge alloc] initWithBundleURL:bundleURL
moduleProvider:nil
launchOptions:launchOptions];
