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

安装依赖

必须安装的依赖有: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

你可能感兴趣的:(如何在Mac系统下配置Android的RN开发环境)