我在github上更新了我學習react-native的一些心得和小技巧著榴，下面的這個例子也在里面添履，如果現(xiàn)在的項目不忙，基本每天都會更新脑又，希望可以幫助到各位讀者暮胧。react-native-learn
如果遇到什么問題可以在評論區(qū)回復(fù)，或者加QQ群397885169討論
推薦集成"react-native": "0.44.0"版本,"react": "16.0.0-alpha.6",
需求：
前端時間寫過兩篇關(guān)于在原生iOS項目中新建react-native頁面问麸，并跳轉(zhuǎn)到原生的文章往衷，但昨天有人問我怎么從原生的react-native項目中跳轉(zhuǎn)到自動生成的iOS頁面里。
我就研究了一下严卖，發(fā)現(xiàn)其實這個跳轉(zhuǎn)和之前的跳轉(zhuǎn)流程基本是一樣的席舍。
這個例子在我的github項目3中
步驟
原理
如果想從react-native中跳轉(zhuǎn)到自帶的原生頁面，首要的問題就是跳轉(zhuǎn)妄田，怎么跳轉(zhuǎn)衣形。
在react-native中提供給了我們Navigator這個組件狠轻，而原生的iOS也提供了UINavigationController，所以想要跳轉(zhuǎn)，我們就需要用到這兩個東西啦倦卖。
-
Navigator
這個是react-native提供給我們跳轉(zhuǎn)其他頁面的組件，需要在react-native項目中引入Navigator
<View style={{ flex: 1 }}>
<Navigator
initialRoute={{ name: 'Root', component: Root }}
style={{height:64}}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.PushFromRight;
}
}
renderScene={(route, navigator) => {
let Component = route.component;
return (
<Component navigator = {navigator} route = {route} {...route.passProps} />
)}
}
/>
</View>
關(guān)于react-native中Navigator使用的文章網(wǎng)上有很多蕊玷，我在這里就不多寫了应媚，可能以后會寫篇文章說一下我對Navigator的理解。
-
UINavigationController
這個是原生iOS開發(fā)中用到最多的控件鲁冯，每次跳轉(zhuǎn)的時候都會用到它拷沸，但我們是想要從react-native跳轉(zhuǎn)到這個里面，所以需要在原生的項目中將rootViewController設(shè)置為UINavigationController
AppDelegate.h
// 創(chuàng)建一個原生的導(dǎo)航條
@property (nonatomic, strong) UINavigationController *nav;
AppDelegate.m
// 初始化Nav
_nav = [[UINavigationController alloc]initWithRootViewController:rootViewController];
self.window.rootViewController = _nav;
這樣我們想要跳轉(zhuǎn)的準備就算是完成了薯演，接下來就是將我們想要跳轉(zhuǎn)的頁面撞芍，傳給react-native，告訴它我要跳轉(zhuǎn)到哪個頁面跨扮。
上面是我的項目修改后的項目目錄序无，其中藍色部分是我要跳轉(zhuǎn)的頁面，紅色部分是我告訴react-native跳轉(zhuǎn)的方法衡创。
原生項目中
- PushNative類
PushNative.h中
#import <Foundation/Foundation.h>
// 導(dǎo)入RCTBridgeModule類帝嗡，這個是react-native提供
#import "RCTBridgeModule.h"
// 遵守RCTBridgeModul協(xié)議
@interface PushNative : NSObject<RCTBridgeModule>
@end
PushNative.m中
#import "PushNative.h"
#import "RCTBridge.h"
// 導(dǎo)入跳轉(zhuǎn)的頁面
#import "TestController.h"
// 導(dǎo)入AppDelegate，獲取UINavigationController
#import "AppDelegate.h"
@implementation PushNative
RCT_EXPORT_MODULE(PushNative)
// RN跳轉(zhuǎn)原生界面
// RNOpenOneVC指的就是跳轉(zhuǎn)的方法璃氢，下面會用到
RCT_EXPORT_METHOD(RNOpenOneVC:(NSString *)msg){
NSLog(@"RN傳入原生界面的數(shù)據(jù)為:%@",msg);
//主要這里必須使用主線程發(fā)送,不然有可能失效
dispatch_async(dispatch_get_main_queue(), ^{
TestController *one = [[TestController alloc]init];
AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];
[app.nav pushViewController:one animated:YES];
});
}
- TestController類
self.navigationItem.title = @"我是原生頁面喲~";
完成上面的步驟之后哟玷，只需要最后一步就可以成功的跳轉(zhuǎn)啦！
react-native項目中
-
NativeModules
需要導(dǎo)入NativeModules組件一也，這個是官方提供給我們與原生交互的組件巢寡，通過它我們才能調(diào)用到原生的方法 - 初始化要跳轉(zhuǎn)的方法
// 看到 PushNative 是不是很熟悉喉脖，沒錯這個就是原生中寫的那個類
// 后面一定要一樣哦，前面可以隨意定制讼渊。
var Push = NativeModules.PushNative;
- 跳轉(zhuǎn)
InteractionManager.runAfterInteractions(()=> {
// RNOpenOneVC這個也是寫在原生里面的再PushNative中哦~
Push.RNOpenOneVC('測試');
});
好啦动看，寫到這里我們的跳轉(zhuǎn)就算是大功告成了！如果有什么不懂的地方爪幻，可以去我的項目中看看菱皆。
總結(jié)
學習react-native也好幾個月了，這段時間也是踩坑無數(shù)挨稿，但學習的過程中也是一個成長的過程仇轻，我很喜歡這個感覺。如果大家有什么問題奶甘，可以在簡書里面評論篷店，也可以私信我。
ps：之前沒下簡書這個軟件臭家，所以之前文章的評論都沒怎么看疲陕，但我昨天下了一個。??????
