Android(安卓)React Native安装指南
概述
本文所讲述均在mac下安装,有windows下办公需求的同学,可以去这里:
1.http://bbs.react-native.cn/topic/10/%E5%9C%A8windows%E4%B8%8B%E6%90%AD%E5%BB%BAreact-native-android%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83
2.http://blog.csdn.net/u011068702/article/details/49448043
好的,言归正传。下面开始在mac下安装RN。
1.安装Homebrew
Homebrew 是一个方便开发者在 MAC OS X 系统上面安装 Linux 工具包的 ruby 脚本。
ruby -e "$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)" |
如果执行上面的命令报下图的错误,说明你的系统之前已经安装过Homebrew了。
安装过的可以尝试更新一下:
sudo chown -R $USER /usr/local cd /usr/local git fetch git reset --hard origin/master brew update |
2.使用brew来安装nvm
brew install nvm |
这里可能会报如下错误:
因为缺少/Library/Caches/Homebrew这个目录的权限,输入下面的命令:
sudo chown -R $USER /Library/Caches/Homebrew/ |
nvm安装完成,接下来会提示说是把nvm加入到环境变量中:
在.bash_profile中加入下面两行,然后source执行一遍。
export NVM_DIR=~/.nvm source $(brew --prefix nvm)/nvm.sh |
3.安装Node.js
nvm install node && nvm alias default node |
坑:官方命令打不开,老老实实下载客户端安装吧。
下载链接
4.安装watchman和flow
watchman是 Facebook 的一个用于监控文件变更并触发指定操作的工具。
Flow是一个 JavaScript 的静态类型检查器,建议安装它,以方便找出代码中可能存在的类型错误。
后面的安装没有啥问题,按照官方文档来就可以:
brew install watchman brew install flow |
5.安装PCRE
brew uninstall pcre && brew install pcre |
最后,最好执行一下如下命令,更新相关软件:
brew update && brew upgrade |
4.开始Hello World
环境安装好了,迫不及待的来 Hello world。运行如下几条命令,直接可以生成一个样例项目:
/*react-native-cli是完成剩余安装的命令行工具。 它是通过 npm 安装的。会在终端里面安装react-native这个命令行,并且只需需做一次即可。 如果这句说是权限不足,开头加上sudo*/ npm install -g react- native -cli /*获取React Native的源代码和依赖包, 然后在AwesomeProject/iOS/AwesomeProject.xcodeproj创建一个新的Xcode项目, 并且在AwesomeProject/android/app下面创建一个gradle项目*/ react- native init AwesomeProject |
运行结果:
插上手机或是模拟器,最好是5.0以上的系统,进入AwesomeProject目录下,开始运行:
cd AwesomeProject react- native run-android |
这里会用Gradle来编译。编译过程中有可能会出现 Android sdk 找不到,Build tools 版本找不到的错误。这是因为 RN for Android 需要环境变量,在.bash_profile中加入:
export ANDROID_HOME=$HOME/android-sdk |
同时需要需要 Build-tools version 23.0.1,API 23 等,安装好就可以正常编译了。
但是再次运行,模拟器出现如下状况:
通常正常情况下会自动安装安装 APK 包并运行,与此同时会打开一个终端运行 dev server。
但我们发现这里并不能自动运行 dev server,你可以在当前项目目录中运行如下命令来手动启动 server:
react- native start |
点击模拟器的RELOAD JS按钮,出现下图。终于成功了,哭了。接下来就可以开始 React Native 之旅了。
在 Android 端,在AwesomeProject
里面运行react-native run-android
来在你的模拟器设备上面安装生成的应用,并且开启允许代码实时渲染的 Node 服务器。为了看到你的更改你必须打开震动菜单(摇动你的设备或者按住设备上面的菜单按钮,在模拟器上面按住 F2 或者 Page Up,在 Genymotion 上面按住 ⌘+M),然后点击Reload JS
。
注意
- 确保相关工具和 Android SDK 都是最新的;
- 因为 React Native for Android 提示错误和开发菜单都是通过悬浮窗显示的,要注意的 ROM 有没有自作聪明的帮你默认禁用掉了显示悬浮窗的权限;
- RN需要启动一个Dev server 来辅助开发,Android 5.0 可以直接通过 USB 的访问,5.0 以下只能通过 WiFi 来访问。为了便于开发,还是建议使用 5.0 的机器。
更多相关文章
- 基于 Android(安卓)NDK
- android 模拟器,创建sdcard 但是却是只读的,没办法修改属性
- Android(安卓)模拟器之 Market 安装
- android获取应用信息,判断应用来源,监听应用的安装和卸载
- android动态加载外部资源文件
- centos编译安装ffmpeg支持AMR
- Android(安卓)Studio创建新项目HelloWorld
- Android(安卓)---Check System Version at Runtime(在软件运行时
- 【Android(安卓)Native Code开发系列】二 Ubuntu系统安装及软硬