最近在研究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 react-native@0.49.3
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中添加你自己的组件。这里我们只是简单的添加一个<Text>组件，然后用一个带有样式的<View>组件把它包起来。
'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 => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text>
);
return (
<View style={styles.container}>
<Text style={styles.highScoresTitle}>
2048 High Scores!
</Text>
<Text style={styles.scores}>
{contents}
</Text>
</View>
);
}
}
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.
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
5.在npm的安装目录下执行命令
npm start
D49379BB-608F-403D-AC8E-F5699F5CDBD1.png
然后正常运行xcode，点击按钮如果一切顺利会出现
C36C3DD9-B265-446C-A1D6-577147B84ACB.png
希望你不会看到红色的界面！！！
这里我遇见两个问题，一个是上面说的版本不匹配问题出现了红色界面。还有就是 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)
网友评论