ReactNative之搭建环境-蒲公英云

今天就帮助大家想做RN开发的朋友们整理一下搭建环境的步骤，
本文是根据官方文档整理的，只是本文会讲的更俗一点。
官方文档链接：

中文：https://reactnative.cn/docs/getting-started.html
英文：https://facebook.github.io/react-native/

首先要看朋友们是要开发Android还是iOS，如果是Android的话那么恭喜你，无论是Windows电脑还是Mac电脑都可以进行开发。如果是想要开发iOS，那么你只能先买个Mac才能跟我们一起开发iOS了。

知识小整理：
Android用Windows或者Mac都可以进行开发
iOS只能用Mac进行开发

文章目录

- 完整原生环境搭建第一步- - 安装依赖：
- - - Yarn、React Native 的命令行工具（react-native-cli）的安装
  - 开发IOS需要额外安装的内容【请确保你用的是mac或者你的电脑装了黑苹果】
  - - - 初始化项目：
  - 开发Android的在额外安装JDK和Android Studio
  - - JDK安装（Java Development Kit）：
    - 接下来是Android开发环境的配置【上面的jdk也是必须的】
    - - 首先下载Android Studio
      - 安装 Android SDK
      - 配置 ANDROID_HOME 环境变量
  - 准备 Android 设备
  - - - 使用 Android 真机
      - 使用 Android 模拟器
    - 创建项目的步骤与IOS一样，[请点击我](#_82)
    - 编译并运行 React Native 应用
    - 修改项目
    - 使用你喜欢的文本编辑器打开App.js并随便改上几行

完整原生环境搭建第一步- - 安装依赖：

不论是开发iOS还是Android，必须安装的有：

node
watchman
React Native命令行工具

node和watchman的安装推荐使用Homebrew进行安装【如果还没安装Homebrew的朋友请看：https://blog.csdn.net/weixin_43606158/article/details/100630193需要向下滚动搜索下就有安装的方法了】

$ brew install node
$ brew install watchman

如果你已经安装了 Node，请检查其版本是否在 v10 以上。安装完 Node 后建议设置 npm 镜像以加速后面的过程。

检查node版本的命令：

$ node -v

在这里插入图片描述

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

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

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

$ npm install -g yarn react-native-cli

如果下发报错为【文件目录可能不一致，前面错误一致即可】
“checkPermissions Missing write access to /usr/local/lib/node_modules”

解决方法：https://blog.csdn.net/weixin_43606158/article/details/100742824

安装完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 某第三方库名。

开发IOS需要额外安装的内容【请确保你用的是mac或者你的电脑装了黑苹果】

开发iOS的在额外安装Xcode【React Native 目前需要Xcode 9.4 或更高版本。你可以通过 App Store 或是到Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。】
开发Android的朋友请点此快速跳转到下方：请点击这里

虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Xcode 来获得编译 iOS 应用所需的工具和环境。

下载完成之后启动Xcode，并点击电脑左上角的Xcode而后点击Preferences。
在这里插入图片描述
而后选择Command Line Tools

特别注意内容！！！

注意事项一：如果你是0.45 及以上版本需要依赖 boost 等几个很难下载成功的第三方库编译。这里有中文网提供的国内下载链接：请点击我！

特别注意事项：
请一定要确保下载的依赖库的名字和版本与你在github上看到的一致。
github上的注意事项：一定要首先选对版本！
github上的ios-install-third-party.sh那个文件在scripts文件夹下

注意事项二：如果你是0.60 及以上版本依赖CocoaPods安装。CocoaPods的仓库在国内也很难访问。如果在CocoaPods的安装步骤卡很久，可以试一下这个国内镜像：请点击我！
额外注意事项：
cocoapods需要先下载成功才可以进行链接上的操作
下载方法：
$ sudo gem install cocoapods

初始化项目：

$ react-native init AwesomeProject

开发Android的在额外安装JDK和Android Studio

虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

JDK安装（Java Development Kit）：

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

$ javac -version

来查看你当前安装的 JDK 版本。如果版本不合要求，则可以到官网上下载。
在这里插入图片描述
jdk1.8下载不到的可以下方评论。

接下来是Android开发环境的配置【上面的jdk也是必须的】

首先下载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（注意 SDK 版本不等于终端系统版本，RN 目前支持 android4.1 以上设备）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击”Configure”，然后就能看到”SDK Manager”。
在这里插入图片描述

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”来下载和安装这些组件。
在这里插入图片描述

而后点击OK进行安装。
安装完毕点击finish结束。

3. 配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

具体的做法是把下面的命令加入到~/.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

译注：~表示用户目录，即/Users/你的用户名/，而小数点开头的文件在 Finder 中是隐藏的，并且这个文件有可能并不存在。可在终端下使用vi ~/.bash_profile命令创建或编辑。如不熟悉 vi 操作，请点击这里学习。

$ vi ~/.bash_profile

然后按下 i 键进行插入
在这里插入图片描述
将上方的内容copy到你这个文件已有内容的后面即可。
而后点击 esc 按键
在输入:wq进行保存并退出的操作。

命令行如果提示无法进行操作请点击这里教你解决：https://blog.csdn.net/weixin_43606158/article/details/100630193

用我链接中的方法的时候注意一定要备好份哦~
文件编辑完毕要保存。
在这里插入图片描述

如果你的命令行不是 bash，而是例如 zsh 等其他，请使用对应的配置文件。

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

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

准备 Android 设备

你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机，也可以是模拟器。后面我们所有的文档除非特别说明，并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device（简称 AVD）的模拟器。此外还有很多第三方提供的模拟器如Genymotion、BlueStack 等。一般来说官方模拟器免费、功能完整，但性能较差。第三方模拟器性能较好，但可能需要付费，或带有广告。

使用 Android 真机

你也可以使用 Android 真机来代替模拟器进行开发，只需用 usb 数据线连接到电脑，然后遵照在设备上运行这篇文档的说明操作即可。

使用 Android 模拟器

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

在这里插入图片描述

如果你刚刚才安装 Android Studio，那么可能需要先创建一个虚拟设备。点击”Create Virtual Device…”，然后选择所需的设备类型并点击”Next”
在这里插入图片描述

译注：请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。

如果你还没有安装 HAXM（Intel 虚拟硬件加速驱动），则先按这篇文档说明来进行安装。

然后点击”Next”和”Finish”来完成虚拟设备的创建。现在你应该可以点击虚拟设备旁的绿色三角按钮来启动它了，启动完后我们可以尝试运行应用。

如果你还没有安装 HAXM（Intel 虚拟硬件加速驱动），则先按这篇文档说明来进行安装。

然后点击”Next”和”Finish”来完成虚拟设备的创建。现在你应该可以点击虚拟设备旁的绿色三角按钮来启动它了，启动完后我们可以尝试运行应用。

创建项目的步骤与IOS一样，请点击我

编译并运行 React Native 应用

确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行react-native run-android：

$ cd AwesomeProject
$ react-native run-android

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

如果你的设备的 Android 版本低于 5.0，则可能在运行时看到红屏，请阅读在设备上运行这篇文档来按照步骤解决。

AwesomeProject on Android

react-native run-android只是运行应用的方式之一。你也可以在 Android Studio 中直接运行应用。

译注：建议在run-android成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。

如果你无法正常运行，遇到奇奇怪怪的红屏错误，先回头仔细对照文档检查，然后可以看看论坛的求助专区。不同时期不同版本可能会碰到不同的问题，我们会在论坛中及时解答更新。但请注意千万不要执行 bundle 命令，那样会导致代码完全无法刷新。