本文摘至: please call me HR

react-native 是伴随 react 一起大火的 另外一个新兴的 web 框架. 同样借由了 react 的写法和单向数据流的特点,逐渐被大家所接受. 目前 github 上已经有3万+的 star 了. 一个字: 服!
然后,俺抱着学习的心态,准备啃啃 react-native . 但后来,发现 MDZZ,什么 Tutorial ... 写的跟没写似的. 后来也是各种 google,查资料,然后补上的... 这里,就当分享一下踩坑的过程吧.
(Ps: 本文主要针对于 Android 版的 react-native)

初入react-native

react-native 的官网和react 做的一样的详细. 这里就不赘述了:传送门
依照官网上的指示,下载一下 node,watchman,Android Studio.
这里,需要补充一下,有可能你在使用npm install -g watchman时,后面会出现启动失败的错误. 你可以尝试使用 brew 进行下载.

// 替换已经下载的 watchman
npm r -g watchman  // 移除
brew install watchman // 使用 brew 重新下载

下载完 Android Studio 之后,相应的 sdk 也会带上. 然后配置一下路径即可:

# 我使用的是 zsh. 就放到 ~/.zshrc 里面就可以
# 如果你使用的是 bash,那就放 bashrc 就 ok 了
export ANDROID_HOME=/Users/jimmy_thr/Library/Android/sdk 
export PATH=$ANDROID_HOME/platform-tools:$PATH  
export PATH=$ANDROID_HOME/tools:$PATH  

# 配置完后,记着 source 一下
source ~/.zshrc

现在,你就可以使用 android 和 adb 基本命令了. 因为 react-native 对 android 的 build-tool 的版本是有要求-- 23.0.1. 你可以使用:

// 查看已经下载的 sdk 的版本号.
android list sdk -a

如果,没有的话,那就下载吧。 直接运行:

// 命令行输入:
android

然后就会弹出一个 GUI 的对话框.

主要把23.0.1选中就ok了. 然后等个几分钟,让他下载.
下载完成之后,回到,一开始 Tutorial 让你 init 的 AwesomeProject 目录中. 然后进入 android 目录. 创建一个 local.properties 文件,里面写入你的 sdk 的 path. 我这里是直接放在 Library.

// 直接配置一行即可
sdk.dir = /Users/jimmy_thr/Library/Android/sdk
// 然后保存 :wq

调起 emulator

这个算是重点吧. 因为,你没吊起 emulator,那么你运行 react-native 也是 nonsense . 这里,果断使用 genymotion 神器. 他商业用途是收费的,而个人用户是不收费的. 直接去这个页面下载即可. 不过,还是需要注册一个 account,因为后面还需要用它,来调用一个 Android 的 emulator.
下载完成之后,就会得到 Application:

这里,先别急Start,因为没啥用. 关键点在 Settings 这里. 他默认使用的是自己的sdk,你需要改为使用和 local.properties 里面设置一样的文件路径.

到这里,就差最后的运行了.

运行 demo app

首先,先 Start 你的 devices. 比如,我这里的 Nexus.
然后,进入 AwesomeProject. 运行 react-native run-android 等他编译完成之后,他自动会调起 APP。
成功的结果如图: