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/