u=1435487395,1753778452&fm=23&gp=0.jpg
一. 利用iOS开发工具Xcode 创建一个空项目;
二. 添加React-Native 依赖包
React Native的植入过程同时需要React和React Native两个node依赖包。
1.1新建package.json,在自己刚创建的空项目的根目录下创建一个package.json的文件，用于初始化React-Native;
在根目录下运行如下命名：
$ touch package.json
1.2打开package.json把以下代码块添加进去，把"name"改成你自己项目的名称；
{
"name": "iOS_RN",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.4.2",
"react-native": "0.41.2"
}
}
其中，"dependencies"中的 "react"和"react-native"版本的部分取决于你的具体需求，一般来说我们推荐使用最新版本。你可以使用npm info react和npm info react-native来查看当前的最新版本。另外，react-native对react的版本有严格要求，高于或低于某个范围都不可以。本文无法在这里列出所有react native和对应的react版本要求，只能提醒读者先尝试执行npm install，然后注意观察安装过程中的报错信息，
1.3安装依赖包
使用npm（node包管理器，Node package manager）来安装React和React Native模块。这些模块会被安装到项目根目录下的node_modules/目录中。 在包含有package.json文件的目录（一般也就是项目根目录）中运行下列命令来安装：
$ npm install
三. Cocoapods集成React Native.
1.若原项目无使用Cocoapods，则在根目录下创建Podfile(已使用的略过);
$ touch Podfile
2在Podfile文件中添加如下代码。如果有则直接在Podfile里面添加如下代码
$ open -e Podfile
platform:ios, '8.0'
target ‘iOS_RN’ do
pod 'React', :path => './node_modules/react-native', :subspecs => [
# 你的工程如何组织，你的node_modules文件夹可能会在别的地方。
# 请将:path后面的内容修改为正确的路径（一定要确保正确～～）。
'Core',
'RCTNetwork’,
'RCTWebSocket',
'ART',
'RCTActionSheet',
'RCTAdSupport',
'RCTGeolocation',
'RCTImage',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTLinkingIOS',
]
#这里是你自己以前的一些三方库，比如AFNetworking
pod 'AFNetworking'
end
保存,运行:
$ pod install
四. 添加index.ios.js文件.
在根目录下创建index.ios.js
$ touch index.ios.js
创建成功之后，根目录下会有index.ios.js文件，打开文件在里面添加如下代码，保存
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class iOS_RN extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
I'm from iOS_ Native
iOS调用React- native
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('iOS_RN', () => iOS_RN);
注意：将类名和注册组件名称替换为自己的项目名称；
五. 在原生app添加RN入口
self.navigationItem.title = @"这个是RN页面";
NSURL *jsCodeLocation;
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"iOS_RN"
initialProperties:nil
launchOptions:nil];
//注意，这里是 @"RNInsetIOSDemo"
rootView.frame = CGRectMake(0, 0, 375, 667);
rootView.backgroundColor = [UIColor blueColor];
[self.view addSubview:rootView];
注意: moduleName 为你的项目名称,注意替换。
六.注意Xcode 项目中的ATS网络请求权限设置，设置info.Plist文件NSAppTransportSecurity属性，以此支持http
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
七.启动开发服务器
在项目的根目录下运行如下命名:
$ nam start
最后，打开项目运行，跳转就能见到神秘的Recat 的页面了；
644F9234-3208-4787-8833-9FFBE3E4EA69.png
