本文摘至:
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 进行下载. // 替换已经下载的 watchmannpm 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 . 这里, 果断使用 神器. 他商业用途是收费的, 而个人用户是不收费的. 直接去这个下载即可. 不过, 还是需要注册一个 account, 因为后面还需要用它, 来调用一个 Android 的 emulator.
下载完成之后, 就会得到 Application:
这里, 先别急Start, 因为没啥用. 关键点在 Settings 这里. 他默认使用的是自己的sdk, 你需要改为使用和 local.properties 里面设置一样的文件路径.
到这里, 就差最后的运行了.
运行 demo app
首先, 先 Start 你的 devices. 比如, 我这里的 Nexus.
然后, 进入 AwesomeProject. 运行react-native run-android 等他编译完成之后, 他自动会调起 APP。成功的结果如图: 