一.首先来搭建React Native环境
- 安装Homebrew
- 安装NodeJS
- 安装yarn
- 安装Watchman
- Xcode
- 测试
1.安装Homebrew
Homebrew,Mac系统的包管理器(套件管理工具)，可以用来安装NodeJS及其他的软件并对他们进行管理
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
如果homebrew在安装软件时可能会碰到/usr/local/目录不可写的权限问题。可以使用下面的命令来修复：
sudo chown -R `whoami` /usr/local
2.安装NodeJS
- 安装node
brew install node
- 设置npm镜像用来加速后面软件的安装。
npm config set registry https://registry.npm.taobao.org --global
或者:
npm config set disturl https://npm.taobao.org/dist --global
3.安装yarn
Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务
npm install -g yarn react-native-cli
安装完yarn同样也要设置镜像
npm config set registry https://registry.npm.taobao.org --global
或者:
npm config set disturl https://npm.taobao.org/dist --global
如果出现EACCES: permission denied的权限报错，修复/usr/local目录的所有权:
sudo chown -R `whoami` /usr/local
安装完yarn之后就可以使用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。
4.安装Watchman
Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。
brew install watchman
5.安装Xcode（App Store下载）
6.测试
安装好了上面的软件之后，来进行：
- 在mac的根目录创建一个myRNProject的文件夹
react-native init myRNProject
不带版本号创建的是最新版本的RN
- 指定版本创建
react-native init myFirstRNProject --version 0.50
-
提示如下：
屏幕快照 2018-07-03 下午2.06.37.png - 根据提示启动我们需要的iOS部分项目
cd /Users/zl/myRNProject
react-native run-ios
或者直接打开
myRNProject.xcodeproj文件来启动
注意： 启动之后，Mac会自动开启一个终端的对话框，这个对话框在项目的开启期间必须要一直打开着，如果被关闭，整个项目也就被关闭了。
如果一切正常，说明项目就是创建成功了
对话框：
项目文件夹：
新版本在
APP.JS文件夹中进行中编码。
如果是049之前的版本，在index.js中。
二.搭建Xcode项目集成环境
1.在mac电脑桌面上touch命令创建一个空的文件夹iOS-RN
2. 在 iOS-RN 文件夹中，创建一个/ios文件
- 在/ios文件中将存放原生项目中所有的文件。直接将原生项目中的文件复制一份拷贝过来即可
3. 安装JavaScript依赖包: package.js文件
- 在项目根目录(和/ios平级)下创建一个名为package.json的空文本文件，然后填入以下内容：
{
"name": "MyReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-alpha.6", // 指定了React 版本
"react-native": "0.51" //这里指定了RN的版本
}
}
scripts中是用于启动packager服务的命令。dependencies中的react和react-native的版本取决于你的具体需求。一般来说我们推荐使用最新版本。你可以使用npm info react和npm info react-native来查看当前的最新版本。另外，react-native对react的版本有严格要求，高于或低于某个范围都不可以。本文无法在这里列出所有react native和对应的react版本要求，只能提醒读者先尝试执行npm install，然后注意观察安装过程中的报错信息，例如require react@某.某.某版本, but none was installed，然后根据这样的提示，执行npm i -S react@某.某.某版本。如果你使用多个第三方依赖，可能这些第三方各自要求的react版本有所冲突，此时应优先满足react-native所需要的react版本。其他第三方能用则用，不能用则只能考虑选择其他库
- 安装依赖包：
$ npm install
4.在原生项目中使用CocoaPod添加RN依赖文件
- 使用终端cd进入到/ios文件中，安装CocoaPod依赖包管理系统。（这里推荐使用CocoaPods，如果之前的原生项目中没有安装的话，需要自行想办法安装一个）。
对于已经安装了CocoaPod 的项目，我们进入到对应的podfile文件
$ vim podfile
- 在podfile文件中添加以下内容：
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.45则加入此行
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的RN模块
]
# 如果你的RN版本 >= 0.42.0，则加入下面这行:
`pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"`
# 这里注意： 如果是0.49以下的RN，则使用下面这条：
` pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"`
# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
- 更新Pod
$ pod install
更新成功之后，我们在项目中就可以通过import React使用React提供的库文件了。
三、桥接RN和iOS项目中的内容
使用RN写一个“欢迎来到联盟” 的界面，然后在原生的项目中使用这个界面:
1. 创建index.js文件
- 在和ios文件夹平级的目录下（根目录），使用
$ touch index.js
创建index.js文件(RN的入口文件)，如果是版本 0.49之前的RN，那么应该创建index.ios.js文件
2. 在index.js文件写入测试代码：
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class LauchView extends React.Component {
render() {
var contents = this.props.rootTag;
return (
<View style={styles.center}>
<Text >
{this.props.content}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
center: {
marginTop: 50,
width:120,
height: 60,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:"red"
},
});
// 整体js模块的名称
AppRegistry.registerComponent('LauchView', () => LauchView);
上面代码的意思是页面上创建了一个包含“Hello World”文字的<text>控件
3.编写原生代码对接RN
- 在AppDelegate文件中，将RN编写的“Hello world”界面设置成window的根视图。
导入import React,然后didFinishLaunchingWithOptions函数中：
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
self.window = UIWindow.init(frame: CGRect.init(x: 0, y: 0, width: ScreenWidth, height: ScreenHeight))
self.window?.makeKeyAndVisible()
// 如果是真机调试，使用电脑的IP地址。
// let url = URL.init(with: "http://192.168.0.174:8081/index.bundle?platform=ios")
// 如果使用模拟器，可用本地服务器的端口。
let url = URL.init(with: "http://localhost:8081/index.bundle?platform=ios")
let rootView = RCTRootView.init(bundleURL: url, moduleName: "LauchView", initialProperties: [ "content":"Hello world"], launchOptions: nil)
let VC = UIViewController.init()
VC.view = rootView
self.window?.rootViewController = VC
return true
}
注意：
LauchView 的名称必须和RN中注册的名称一模一样。不然会无法识别的。
这段代码的意思就是从RN中加载一个页面（这个页面就是我们写的“Hello world”页面），然后作为window的根视图展示
4. 启动RN项目
使用终端，cd 进入到项目的根目录，就是上面说的 iOS-RN文件夹，在这里可以看到 index.js文件。
输入命令行：
$ npm start
RN项目开始启动，终端框中看到提示：Loading dependency graph, done.，说明RN启动完成。注意:
不要关闭这个终端，如果需要使用终端执行其他的命令，可以新建窗口。
至此，所有的RN依赖库都加载完毕，可以在Xcode使用了
5.运行Xcode
- 选择模拟器，comand+R
