如何在Mac系统下配置Android的RN开发环境

2019-05-16 本文已影响2人测试开发雨辰

安装依赖

必须安装的依赖有：Node、Watchman和React Native命令行工具以及Xcode。

Node,Watchman

推荐使用Homebrew来安装Node和Watchman。在命令行中输入以下命令行来安装。

brew install node
brew install watchman

如果已经安装了Node，请检查其版本是否在 v10 以上。命令行node -v即可查询安装版本。安装完Node后建议设置npm镜像以加速后面的过程。

注意：不要使用cnpm! cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

Yarn、React Native 的命令行工具（react-native-cli）

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安装完 yarn 之后就可以用 yarn 代替 npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

Java Development Kit

React Native 需要 Java Development Kit [JDK] 1.8（暂不支持 1.9 及更高版本）。你可以在命令行中输入

javac -version来查看你当前安装的 JDK 版本。如果版本不合要求，则可以到官网上下载

JDK1.8具体配置步骤链接

Android开发环境

1、安装 Android Studio
首先下载和安装Android Studio,安装界面中选择“Custom”选项，确保选中了以下几项：

Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device
然后点击“Next”来安装选中的组件。

如果选择框是灰的，你也可以先跳过，稍后再来安装这些组件。
安装完成后，看到欢迎界面时，就可以进行下面的操作了。

2、安装Android SDK
Android Studio默认会安装最新版本的Android SDK。目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。
你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。

Android Studio.png

SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。

在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 9 (Pie)选项，确保勾选了下面这些组件:

Android SDK Platform 28
Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）
然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本
最后点击"Apply"来下载和安装这些组件。
3、配置 ANDROID_HOME 环境变量
React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。
打开终端，进入当前用户的home目录：cd ~/
打开.bash_profile并编辑：open .bash_profile
把下面的命令加入到bash_profile文件中：

#如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

以下是我文件的配置图：

3.png

使用source $HOME/.bash_profile命令来使环境变量设置立即生效（否则重启后才生效）。
可以使用echo $ANDROID_HOME检查此变量是否已正确设置。

请确保你正常指定了 Android SDK 路径。你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是Appearance & Behavior → System Settings → Android SDK

创建新项目

使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目：

react-native init AwesomeProject

使用Android模拟器

你可以使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备，它的图标看起来像下面这样：

3.png
如果你刚刚才安装 Android Studio，那么可能需要先创建一个虚拟设备。点击"Create Virtual Device..."，然后选择所需的设备类型并点击"Next"，然后选择Pie API Level 28 image.

译注：请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。
然后点击"Next"和"Finish"来完成虚拟设备的创建。现在你应该可以点击虚拟设备旁的绿色三角按钮来启动它了，启动完后我们可以尝试运行应用。

编译并运行 React Native 应用

确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行react-native run-android：,记住：一定要先运行模拟器哦~

cd AwesomeProject
react-native run-android

如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。

运行过程中遇到的问题

1、java.lang.RuntimeException: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
这个问题是工程找不到我们的android SDK
解决方法：创建一个Android空工程，在工程目录下找到local.properties文件，复制到RN项目目录下的android文件夹内。

3.png

2、What went wrong:
Execution failed for task ':app:installDebug'.

com.android.builder.testing.api.DeviceException: No connected devices!
重点是这句话：No connected devices!
这种问题是因为没有设备运行或者模拟器没开，导致没有链接上网络，真机也要记得开启调试模式。

3、报错：/bin/sh: adb: command not found ,如下图

4.png

原因：我的终端命令行是zsh,然而我配置的环境变量是在bash_profile文件里，对zsh不生效，因此，需要编辑下.zshrc配置环境变量,

cd ~/
open .zshrc
#添加相关环境变量配置，将bash_profile文件里内容复制过来就行了
source .zshrc

接下来就可以在zsh命令行中使用了~
最后附加上bash和zsh切换方法：
切换到bash

chsh -s /bin/bash

切换到zsh

chsh -s /bin/zsh

记得输入切换命令后，要重新打开终端terminal才生效哦！

最后附张安卓模拟器运行成功后的截图~

android.gif