Android React Native安装指南

最新推荐文章于 2024-10-29 14:36:02 发布

yx223322

最新推荐文章于 2024-10-29 14:36:02 发布

阅读量278

点赞数

分类专栏： react native 文章标签： react android 安装指南

本文链接：https://blog.csdn.net/yx223322/article/details/84756636

版权

react native 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

概述

本文所讲述均在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。

注意

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