安装依赖
必须安装的依赖有：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 版本。如果版本不合要求，则可以到 官网上下载
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
网友评论