当前位置: 代码迷 >> Android >> Android React Native装配指南
  详细解决方案

Android React Native装配指南

热度:93   发布时间:2016-04-24 12:02:03.0
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 -fsSL?https://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

注意

  1. 确保相关工具和 Android SDK 都是最新的;
  2. 因为 React Native for Android 提示错误和开发菜单都是通过悬浮窗显示的,要注意的 ROM 有没有自作聪明的帮你默认禁用掉了显示悬浮窗的权限;
  3. RN需要启动一个Dev server 来辅助开发,Android 5.0 可以直接通过 USB 的访问,5.0 以下只能通过 WiFi 来访问。为了便于开发,还是建议使用 5.0 的机器。
  相关解决方案