react native环境搭建

1. 安装HomeBrew(http://brew.sh/index_zh-cn.html)

$ ruby -e “$(curl –fsSL https://raw.gihubusercontent.com/Homebrew/install/master/install)”

2. 安装Node.js 

3. 通过brew装watchman。我们推荐您安装watchman,否则您可能在点击一个节点文件的时候出现错误See below for some more information on options to configure your build

$ brew update

$ brew install watchman

4. 通过brew装flow。Flow is a static type checker,designed to find type errors in JavaScript programs.

$ brew update

$ brew install flow

5. 快速开始 

$ npm install –g react-native-cli

$ react-native init HelloProject

注意添加local.properties(见第8点补充说明)（坑）

6. 运行Android应用程序

$ cd HelloProject

$ react-native run-android 

到这里我们成功的运行了我们的第一个React Native 应用程序。

7. 运行Ios应用程序

在Xcode中打开ios/HelloProject.xcodeproj并运行

8. 补充

npm和sdk环境变量的配置

$ touch .bash_profile

$ open –e .bash_profile

$ echo $PATH

下载ndk(android studio配置中有下载入口)

配置sdk和ndk路径

复制local.properties（里面配置sdk和ndk路径）到项目第一层路径下（坑）

测试facebook demo

1. 下载最新版0.13。

https://github.com/facebook/react-native/tree/0.13-stable（版本更新很快）

2. 打开下载的demo目录，利用npm下载node_modules依赖包

$ cd react-native

$ npm install

3. 运行android应用程序

$ cd react-native

$ npm start

$ ./gradlew :Examples:UIExplorer:android:app:installDebug

注意修改build.gradle中react-native依赖到最高版本（见第5点补充）

注意为UIExplorer的java代码添加包com.facebook.react.uiapp

注意如果运行后读不到js，在menu中选择修改ip即可

4. 离线模式安装APK

$npm start

http://localhost:8081/Examples/UIExplorer/UIExplorerApp.android.bundle?platform=android&dev=true

将下载的js保存到ReactNativeDevBundle.js放到assets目录

然后在activity中添加拷贝该js文件到手机指定目录的功能

运行即可

注意配置好ndk

注意修改成离线模式后$ npm start开启会失败（具体细节和js依赖有关）

curl 'http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.bundle?platform=ios' -o main.jsbundle

5. 补充

Android运行前提

 

修改代码中build.gradle中的react-native依赖到最新版本，由于android版react-native诞生不久，版本一直在升级优化，所以避免不了之前版本遗留有一点问题（坑）

 

 

 

 

 

参考：https://github.com/facebook/react-native/tree/0.13-stable

             http://wiki.jikexueyuan.com/project/react-native/GettingStarted.html

http://www.race604.com/rn-android-standalone-apk/