需求：
上一篇文章中弓摘，我們講到怎么在iOS原生里面集成React-Native焚鹊，這篇文章將講解怎么在原生中創(chuàng)建React-Native頁面，并且從RN頁面跳轉(zhuǎn)到原生頁面。
我將項目更新到了github上末患，里面有很多我自己的理解研叫，希望可以幫到各位讀者react-native-learn
如果遇到什么問題可以在評論區(qū)回復(fù)，或者加QQ群397885169討論
創(chuàng)建：
我們將在項目中創(chuàng)建一個View璧针，用來展示React-Native頁面
-
在原生ios應(yīng)用添加容器視圖 我們在工程文件下創(chuàng)建一個名為ReactView的UIView文件:
React-iOS目錄 -> 右鍵 -> New File -> Cocoa Touch Class -> ReactView嚷炉，
- 修改ReactView.m：
#import "ReactView.h"
#import <RCTRootView.h>
@implementation ReactView
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
// 這里的moduleName一定要和下面的index.ios.js里面的注冊一樣
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"ReactiOS"
initialProperties:nil
launchOptions:nil];
[self addSubview:rootView];
rootView.frame = self.bounds;
}
return self;
}
@end
ReactView.m中通過http://localhost:8081/index.ios.bundle?platform=ios&dev=true加載bundle文件，由RCTRootView解析轉(zhuǎn)化原生的UIView探橱，然后通過initWithFrame將frame暴露出去申屹。
- 在原生ios應(yīng)用中引用ReactView 上面我們創(chuàng)建了一個ReactView，打開ViewController.m隧膏，在viewDidLoad方法中應(yīng)用我們的ReactView哗讥。
#import "ViewController.h"
#import "ReactView.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
ReactView * reactView = [[ReactView alloc] initWithFrame:CGRectMake(0,64,CGRectGetWidth(self.view.bounds), 100)];
[self.view addSubview:reactView];
}
這樣，我們的項目就創(chuàng)建好了胞枕。接下來就是運行項目了
運行：
如果做過reactNative開發(fā)杆煞，都知道每次運行項目之前都需要啟動開發(fā)服務(wù)器，只不過之前是X-Code自動啟動腐泻，現(xiàn)在需要手動開啟决乎。
進(jìn)入reactnative根目錄（我是放在桌面上了，最簡單的方式就是直接拖拽）派桩，然后啟動$ react-native start
設(shè)置允許Http請求:
直接運行項目會報Could not connect to development server錯誤
解決方式：打開info.plist文件构诚，添加下面配置即可：
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
運行ios項目:
通過Xcode點擊項目或者command + R運行項目，如果順利的話窄坦，就會看到成功運行的界面：
當(dāng)看到上面的圖片唤反，就代表大功告成，這樣就掌握了在iOS原生中集成React-Native方法了~
跳轉(zhuǎn)：
接下來鸭津，我們講講怎么從上面創(chuàng)建的RN頁面點擊Hello World !跳轉(zhuǎn)回原生頁面
ps:官方文檔對于iOS和原生的交互寫了好多彤侍，不知道你們看懂沒，反正我是一頭霧水逆趋。
還是直接上代碼：
- 在OC中的代碼
?1. 在XCode 中的AppDelegate.h中創(chuàng)建原生的UINavigationController,這樣在其他頁面可以用過AppDelegate這個單例來調(diào)用到導(dǎo)航進(jìn)行跳轉(zhuǎn)操作
#import <UIKit/UIKit.h>
@interface AppDelegate : UIResponder <UIApplicationDelegate>
@property (strong, nonatomic) UIWindow *window;
// 創(chuàng)建一個原生的導(dǎo)航條
@property (nonatomic, strong) UINavigationController *nav;
@end
2.在AppDelegate.m中使導(dǎo)航條成為跟控制器
#import "AppDelegate.h"
#import "ViewController.h"
@interface AppDelegate ()
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
self.window.backgroundColor = [UIColor whiteColor];
ViewController *view = [[ViewController alloc]init];
// 初始化Nav
_nav = [[UINavigationController alloc]initWithRootViewController:view];
// 將Nav設(shè)置為根視圖
self.window.rootViewController = _nav;
[self.window makeKeyAndVisible];
return YES;
}
3.新建 RCTModules 類盏阶，繼承 NSObject 封裝一個方法使用“通知”進(jìn)行消息的傳送從而實現(xiàn)頁面的跳轉(zhuǎn)
RCTModules.h中
#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"
@interface RTModule : NSObject<RCTBridgeModule>
@end
RCTModules.m中
#import "RTModule.h"
#import "RCTBridge.h"
@implementation RTModule
RCT_EXPORT_MODULE(RTModule)
//RN跳轉(zhuǎn)原生界面
RCT_EXPORT_METHOD(RNOpenOneVC:(NSString *)msg){
NSLog(@"RN傳入原生界面的數(shù)據(jù)為:%@",msg);
//主要這里必須使用主線程發(fā)送,不然有可能失效
dispatch_async(dispatch_get_main_queue(), ^{
[[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenOneVC" object:nil];
});
}
@end
4.接下來在ViewController.m中添加通知的方法
#import "ViewController.h"
#import "ReactView.h"
#import "AppDelegate.h"
#import "OneViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.navigationItem.title = @"我是包含RN的原生頁面喲~";
ReactView * reactView = [[ReactView alloc] initWithFrame:CGRectMake(0, 64, CGRectGetWidth(self.view.bounds), 100)];
[self.view addSubview:reactView];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(doPushNotification:) name:@"RNOpenOneVC" object:nil];
}
- (void)doPushNotification:(NSNotification *)notification{
NSLog(@"成功收到===>通知");
OneViewController *one = [[OneViewController alloc]init];
AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];
[app.nav pushViewController:one animated:YES];
//注意不能在這里移除通知否則pus進(jìn)去后有pop失效
}
@end
5.接下來就要創(chuàng)建我們將要跳轉(zhuǎn)的頁面啦。創(chuàng)建OneViewController繼承于UIViewController
- 在index.ios.js中的代碼
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
NativeModules
} from 'react-native';
var RNModules = NativeModules.RTModule;
class ReactiOS extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity
onPress={()=>RNModules.RNOpenOneVC('測試')}>
<Text>Hello World!</Text>
</TouchableOpacity> </View> );
}
}
const styles = StyleSheet.create({
container: {
backgroundColor : 'red',
height:100,
flexDirection : 'row'
},
});
AppRegistry.registerComponent('ReactiOS', () => ReactiOS);
運行：
上面的那些步驟寫完闻书，開啟服務(wù)器就應(yīng)該能看到下面這張圖名斟，點擊helloWorld，跳轉(zhuǎn)到下一個頁面啦~
小結(jié)：
通過React-Native與iOS原生的集成步驟和這篇文章魄眉，應(yīng)該能夠?qū)W會怎么在項目中集成React-Native項目了砰盐。當(dāng)然，你如果想在同一個RN頁面中跳轉(zhuǎn)多個頁面坑律，可以注冊不同的通知岩梳，在RN頁面點擊的時候跳轉(zhuǎn)就可以了。在我的demo中會有這個例子。
ps：我還是很推薦用Cocoapods集成React-Native開發(fā)環(huán)境的冀值，因為我手動集成的時候遇到了好多坑,如果在開發(fā)中遇到什么其他問題也物，歡迎評論。
/(ㄒoㄒ)/~~ 不知道怎么往github上傳列疗。滑蚯。。所以打包成了百度云
