一、新建一个工程，名为RNAndiOS(名字随便)
image.png
二、创建一个存放react-native的文件夹RN(名字随意)
image.png
三、RN文件夹下新建一个名为package.json的文件和一个index.ios.js的文件
package.json:
{
"name": "RNAndiOS",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "^16.0.0-alpha.12",
"react-native": "^0.47.2"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "3.0.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
index.ios.js:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class RNAndiOS extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
iOS RN 混合开发的Demo
</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
AppRegistry.registerComponent('RNAndiOS', () => RNAndiOS);
五、cd到RN文件夹，执行npm install命令，安装成功后文件夹如下：
image.png
六、在项目根目录下创建Podfile（需要cocoapods，版本要最新的，不是的更新一下，不然会报错）,然后执行pod install命令
Podfile：
platform :ios, '8.0'
target "RNAndiOS" do
pod 'Yoga', :path => ‘./RN/node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => ‘./RN/node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTImage',
'RCTAnimation',
'RCTNetwork’,
'RCTWebSocket',
'BatchedBridge'
]
end
七、安装完成后文件夹如下：
image.png
八、打开RNAndiOS.xcworkspace(不是RNAndiOS.xcodeproj)，为了方便测试后面的RN与原生的互调，我们在项目里放一个导航控制器。
项目结构：
image.png
AppDelegate:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
ViewController *root = [[ViewController alloc] init];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:root];
self.window.rootViewController = nav;
[self.window makeKeyAndVisible];
return YES;
}
ViewController:
#import "ViewController.h"
#import "SecondViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor lightGrayColor];
UIButton *pushButton = [UIButton buttonWithType:UIButtonTypeCustom];
[pushButton setTitle:@"点我去RN" forState:UIControlStateNormal];
pushButton.frame = CGRectMake(100, 100, 100, 100);
[pushButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[pushButton addTarget:self action:@selector(pushToRN) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:pushButton];
}
- (void)pushToRN {
SecondViewController *second = [[SecondViewController alloc] init];
[self.navigationController pushViewController:second animated:YES];
}
@end
SecondViewController:
#import "SecondViewController.h"
#import <React/RCTRootView.h>
#import "RNSendBridgeModule.h"
#define KMainScreenW [UIScreen mainScreen].bounds.size.width
#define KMainScreenH [UIScreen mainScreen].bounds.size.height
#define isIphoneX (KMainScreenH == 812 ? YES : NO)
@interface SecondViewController ()
@end
@implementation SecondViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"RNAndiOS" initialProperties:nil launchOptions:nil];
rootView.backgroundColor = [UIColor whiteColor];
rootView.frame = CGRectMake(0, isIphoneX?88:64, KMainScreenW, isIphoneX?KMainScreenH-122:KMainScreenH-64);//简单适配一下iPhone X
[self.view addSubview:rootView];
}
@end
至此，准备工作结束。ViewController是原生，SecondViewController是react-native界面
九、cd到RN目录，执行 react-native start 命令，执行成功后直接运行项目。运行项目前记得在info.plist中配置允许http请求，不然会大红屏。也许会加载的有点慢，这很正常，因为debug模式的RN和release模式的RN简直不是同一个东西。
react-native start成功运行后是这样的：
image.png
iPhone X模拟器截图：
Simulator Screen Shot - iPhone X - 2017-11-20 at 15.35.16.png
