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