ReactNative之搭建环境

你的名字 2024-04-18 21:24 51阅读 0赞

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

*  中文：[https://reactnative.cn/docs/getting-started.html][https_reactnative.cn_docs_getting-started.html]
 *  英文：[https://facebook.github.io/react-native/][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 
                 *  2. 安装 Android SDK
                 *  3. 配置 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][https_blog.csdn.net_weixin_43606158_article_details_100630193]需要向下滚动搜索下就有安装的方法了】**

$ brew install node
    $ brew install watchman

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

检查node版本的命令：

$ node -v

![在这里插入图片描述][20190912083140160.png]

> 注意：不要使用 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][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。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]  
而后选择Command Line Tools  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]

<table> 
 <tbody> 
  <tr> 
   <td> <font>特别注意内容！！！</font> </td> 
  </tr> 
 </tbody> 
</table>

> 注意事项一：如果你是0.45 及以上版本需要依赖 boost 等几个很难下载成功的第三方库编译。这里有中文网提供的国内下载链接：[请点击我！][Link 1]
> 
> 特别注意事项：  
> 请一定要确保下载的依赖库的名字和版本与你在github上看到的一致。  
> github上的注意事项：一定要首先选对版本！  
> github上的ios-install-third-party.sh那个文件在scripts文件夹下

> 注意事项二：如果你是0.60 及以上版本依赖CocoaPods安装。CocoaPods的仓库在国内也很难访问。如果在CocoaPods的安装步骤卡很久，可以试一下这个国内镜像：[请点击我！][Link 2]  
> 额外注意事项：  
> 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 版本。如果版本不合要求，则可以到官网上下载。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 2]  
jdk1.8下载不到的可以下方评论。

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

##### 首先下载Android Studio  #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 3]  
安装界面中选择"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"。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 4]

> 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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 5]  
然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

最后点击"Apply"来下载和安装这些组件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 7]  
而后点击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 操作，请点击[这里][Link 3]学习。

$ vi ~/.bash_profile

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

> 命令行如果提示无法进行操作请点击这里教你解决：[https://blog.csdn.net/weixin\_43606158/article/details/100630193][https_blog.csdn.net_weixin_43606158_article_details_100630193]

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

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

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

> 请确保你正常指定了 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 数据线连接到电脑，然后遵照[在设备上运行][Link 4]这篇文档的说明操作即可。

##### 使用 Android 模拟器 #####

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

--------------------

![在这里插入图片描述][20191115090044696.png]

--------------------

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

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

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

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

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

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

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

#### 编译并运行 React Native 应用 ####

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

$ cd AwesomeProject
    $ react-native run-android

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

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

![AwesomeProject on Android][]

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

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

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

#### 修改项目 ####

现在你已经成功运行了项目，我们可以开始尝试动手改一改了：

#### 使用你喜欢的文本编辑器打开App.js并随便改上几行 ####

按两下 R 键，或是用 Menu 键（通常是 F2，在 Genymotion 模拟器中是⌘+M）打开开发者菜单，然后选择 Reload JS 就可以看到你的最新修改。  
完成了！  
恭喜！你已经成功运行并修改了你的第一个 React Native 应用。

[https_reactnative.cn_docs_getting-started.html]: https://reactnative.cn/docs/getting-started.html
[https_facebook.github.io_react-native]: https://facebook.github.io/react-native/
[https_blog.csdn.net_weixin_43606158_article_details_100630193]: https://blog.csdn.net/weixin_43606158/article/details/100630193
[20190912083140160.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/56efc12f1fef4ba782ad4e423782ba9b.png
[https_blog.csdn.net_weixin_43606158_article_details_100742824]: https://blog.csdn.net/weixin_43606158/article/details/100742824
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/230ae3c18a054c14ba7d5041fb5655d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/60a9edff908042e397a1a7794676dd8e.png
[Link 1]: http://bbs.reactnative.cn/topic/4301/ios-rn-0-45%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E6%89%80%E9%9C%80%E7%9A%84%E7%AC%AC%E4%B8%89%E6%96%B9%E7%BC%96%E8%AF%91%E5%BA%93-boost%E7%AD%89
[Link 2]: https://mirror.tuna.tsinghua.edu.cn/help/CocoaPods/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1d81433c62444c6cacd627e2df6bc763.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/dcad3efdafad47abad182303205b1c5a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/42fda37381ad4ba28adb3735578e226d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e73017c22a804d1da2c1b9553ae07739.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/481b6260455d41768d1a93b09fd1fe3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/cc8d2f3a30044a1898a559ba52db150a.png
[Link 3]: http://www.eepw.com.cn/article/48018.htm
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/50d0f848046f438f916e7cc464e61f9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5f9870d4d08f4f66a3691def5a2ff466.png
[20191115085745862.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/239e18aaac754180b923c42f9f0b777e.png
[Link 4]: https://reactnative.cn/docs/running-on-device/
[20191115090044696.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d52732427732494ba8de48d5e4190659.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNjE1OA_size_16_color_FFFFFF_t_70 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/473bd950a6684843a44e232d5ee7a256.png
[Link 5]: https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-mac-os-x
[AwesomeProject on Android]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b799089623e749a1b9830baa7e49dccf.png