快速入门react-native

本文摘至: 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。
成功的结果如图: