最近在研究React Native，虽然RN中文文档很清楚，按照官网一步一步来，但是在配置开发环境中还是遇见很多坑，可能是因为技术更新很快但是文档没有更新，配置环境很繁琐特别是网络不好的时候就更烦人，本人也是初学者，有不对的地方或者有更好的建议希望多多指教。本人对macdown语法不是很熟练(懒得去学)排版不是很好，凑合着看吧
环境macos
参考链接(http://facebook.github.io/react-native/docs/troubleshooting.html)
(http://reactnative.cn/docs/0.44/getting-started.html)
一.安装Homebrew
Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：
sudo chown -R `whoami` /usr/local
二.使用Homebrew来安装Node.js.安装完node后npm也就安装好了（安装node也可以直接去官网下载安装包直接安装，但是不建议这么做，因为卸载的时候可能有点麻烦）
brew install node
npm更新版本npm i -g npm
三.打开终端cd到项目根目录下
1.创建package.json文件，这个是npm安装依赖库时用到的，执行下面命令：（也可用执行命令npm init来创建package.json文件这里我就手动创建了）
touch package.json
这时你会在根目录下看到一个package.json的文件
2.把以下代码复制到package.json文件里
{
"name": "NumberTileGame",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-beta.5",
"react-native": "0.49.3"
}
}
这里重要的是"scripts"和"dependencies"参数其他参数随便啦。
在这里有个坑，浪费了一点时间，react-native对react的版本有严格要求，高于或低于某个范围都不可以，一开始我安装的react-native和react版本不对应导致后来出现问题了，我用的react版本是"16.0.0-alpha.6"，react-native版本是"0.44.2"，你可以使用npm info react和npm info react-native来查看当前的最新版本，npm update -g react-rative-cli更新到最新版本
升级或者降级npm包的版本
npm install --save [email protected]
3.安装依赖包
使用npm（node包管理器，Node package manager）来安装React和React Native模块。这些模块会被安装到项目根目录下的node_modules/目录中。 在包含有package.json文件的目录（一般也就是项目根目录）中运行下列命令来安装：
npm install
安装好后你会在根目录发现一个node_modules目录，打开后你会惊讶的发现怎么会有这么多文件夹！不是应该只有react-native和react两个文件夹吗！这是正常的因为react也需要很多依赖包，但是看着项目里有这么多文件夹就是不爽。
四.用 CocoaPods 安装 React Native
CocoaPods 是 iOS/Mac 开发的管理工具包。还没有安装CocoaPods的 先暂停去安装CocoaPods吧。CocoaPods的安装我就不说了。
在Podfile添加下面内容
# target的名字一般与你的项目名字相同
target 'NumberTileGame' do
# Third party deps
pod 'Folly', :podspec => 'node_modules/react-native/third-party-podspecs/Folly.podspec'
pod 'DoubleConversion', :podspec => 'node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'GLog', :podspec => 'node_modules/react-native/third-party-podspecs/GLog.podspec'
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
'CxxBridge',#需要依赖上面三个库
# 在这里继续添加你所需要的模块
]
# 如果你的RN版本 >= 0.42.0，请加入下面这行
pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
end
注意要加入‘BatchedBridge’模块要不然会xcode编译会报错
注意yoga的y要小写不要大写
然后在CocoaPods的安装目录下执行命令
pod install
五.代码集成
1.首先创建一个空的index.ios.js文件。一般来说我们把它放置在项目根目录下。
index.ios.js是React Native应用在iOS上的入口文件。而且它是不可或缺的！它可以是个很简单的文件，简单到可以只包含一行require/import导入语句。为了简单示范，把全部的代码都写到了index.ios.js里（当然实际开发中我们并不推荐这样做）。
在项目根目录执行以下命令创建文件：
touch index.ios.js
2.在index.ios.js中添加你自己的组件。这里我们只是简单的添加一个
'use strict';
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class RNHighScores extends React.Component {
render() {
var contents = this.props["scores"].map(
score => {score.name}:{score.value}{"\n"}
);
return (
2048 High Scores!
{contents}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
// 整体js模块的名称
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
RNHighScores是整体js模块（即你所有的js代码）的名称。你在iOS原生代码中添加React Native视图时会用到这个名称。
3.在UIViewController添加一个UIButton，然后在UIButton的点击事件里添加下面代码
- (IBAction)highScoreButtonPressed:(id)sender {
NSLog(@"High Score Button Pressed");
NSURL *jsCodeLocation = [NSURL
URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @"RNHighScores"
initialProperties :
@{
@"scores" : @[
@{
@"name" : @"Alex",
@"value": @"42"
},
@{
@"name" : @"Joel",
@"value": @"10"
}
]
}
launchOptions : nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
}
4.在Info.plist里面添加内容(如果不添加下面内容则需要在点击事件里url地址里localhost换成你的电脑ip地址)
Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's Info.plist (or equivalent) file.
NSAppTransportSecurity
NSExceptionDomains
localhost
NSTemporaryExceptionAllowsInsecureHTTPLoads
5.在npm的安装目录下执行命令
npm start
然后正常运行xcode，点击按钮如果一切顺利会出现
希望你不会看到红色的界面！！！
这里我遇见两个问题，一个是上面说的版本不匹配问题出现了红色界面。还有就是 Info.plist没有配置网络localhost也没有改成电脑ip地址，也出现了红色界面。
六.总结
写了这么多，其实当你了解了整个流程，几分钟就操作好了。我也是为了防止以后忘了，就写了这篇文章。这才是刚刚开始，我也是刚开始了解这个东西，还有很多东西需要去了解。希望多多指教
八.离线打包jsbundle
在根目录下新建一个bundle文件夹,然后执行命令
react-native bundle --entry-file ./index.ios.js --bundle-output ./bundle/index.ios.jsbundle --platform ios --assets-dest ./bundle --dev false
把bundle目录下的jsbundle文件拖入工程，或者放到自己的服务器就可以使用了，工程里url地址要做相应的改变
七.热更新........(http://www.beansmile.com/blog/posts/react-native-hot-deployment)
附上demo(https://github.com/wangkai678/WKReactNativeLearn.git)