超详细React Native环境搭建以及运行项目（Windows环境）

admin管理员组

文章数量:1532695

超详细React Native环境搭建以及运行项目（Windows环境）

本文章以本人使用的 0.59 RN版本为例，其他的版本大同小异，具体可前往RN官网参考对应的教程
https://reactnative/versions

一、配置基本的开发环境

Node, Python2, JDK

• Node 的版本必须大于等于 10 (RN 0.59 版本建议10.x, 之前我装最新版12.x, 因版本过高导致项目跑不起来, RN 0.61 以上才要求 Node 版本 12.x)
• Python 的版本必须为 2.x（不支持 3.x）
• JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）

基本的开发环境应该都有配置，而且如果是我自己在这篇文章里列出图文教程的话，内容也会特别多，所以下面我只列出相关的教程地址，写得都很详细。最后感谢以下博文的作者。

1. 安装Node

具体的Node安装教程可参考该文章：https://wwwblogs/liuqiyun/p/8133904.html
写的非常详细，请完整地按照它的步骤来，不过我们需要的 10.x 版本的 Node可通过下面的官网链接去下载：
https://nodejs/dist/latest-v10.x/

下载对应的 msi 安装包即可

2. 安装Python2

具体的 python 安装教程可参考该文章：https://wwwblogs/coco56/p/11525913.html
没什么好讲的，看着教程来。不过 python2 和 python3 貌似可以同时安装，感兴趣的可以去搜索相关内容。

3. 安装JDK

具体的 JDK 1.8 安装教程可参考该文章：https://wwwblogs/heaven21cn/p/12596546.html

环境变量配置可参考这个：
https://wwwblogs/gz9218/p/2ae083861f6749899b1b800faabe1c17.html

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

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

1. npm 设置淘宝镜像源

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

2. 安装 yarn 和 react-native-cli， 以及设置镜像源

npm install -g yarn react-native-cli

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

这里插句话：若使用yarn 进行包管理，且后面项目中有使用到 sass 的话，需指定 sass 下载源，
这个情况比较特殊，可以记一下
yarn config set sass-binary-site http://npm.taobao/mirrors/node-sass

三、配置Android环境

先检查一下基本环境配置，类似以下一样没问题即可进行下一步

1. 安装Android Studio

下载 Android Studio 安装包：http://www.android-studio

1. 点击 Next

2. 点击 Next

3. 更改一下安装路径，然后 Next

4. 点击 Install

5. 点击 Next

6. 点击 Finish

2. 运行Android Studio：

1. 选择第二个，然后点击 OK

2. 点击第二个

3. 点击 Cancel

4. 点击 Next

5. 选择 Custom，然后 Next

6. 选择主题，喜欢哪个选哪个

7. 这里是重点！！！确保选中了以下几项：

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)

Android Virtual Device 这个可以不要，是安装模拟器所需要的，但是 Android Studio官方的模拟器我感觉都不好用，所以我没装这个。模拟器我用的夜神，可以看我后面的教程

8. 然后后面就是 Finish Finish

9. 然后到了这个界面，就是点击 Configure， 然后选择 SDK Manager

10. 看图按步骤

3. 配置 ANDROID_HOME 环境变量 ：

**1. 系统变量中新增 ANDROID_HOME ，变量值指向 SDK 的安装位置 **

SDK 的安装位置忘记的话可以在刚刚的 SDK Manager 查看

**2. 把 platform-tools 目录添加到环境变量 Path 中 **

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 系统变量，选中Path变量，然后点击编辑
添加 %ANDROID_HOME%\platform-tools

至此，Android 环境配置完成

四、创建新项目

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

react-native init RnTest

提示：你可以使用–version参数（注意是两个杠）创建指定版本的项目。例如react-native init RnTest --version 0.44.3。注意版本号必须精确到两个小数点。

创建完即可用编辑器打开项目，创建项目的同时基本的依赖也一并装好了，下面讲怎么跑起来。

五、运行新项目

1. 真机调试 ：

可以参考官方教程：https://reactnative/docs/0.59/running-on-device

（1）打开 USB 调试

不同手机可能有些差异，大致都是找到手机的全部参数，或者是关于手机，然后快速点击系统版本号，即可进入开发者选项

然后进入开发者选项，勾选 USB 调试即可（实在不知道自己手机的开发者选项在哪的就百度一下吧，毕竟可能每部手机都弄不一样）

（2）使用 USB 连接电脑跟手机

（3）检查你的设备是否能正确连接到 ADB（Android Debug Bridge）

$ adb devices 

运行命令之后，在右边那列看到device说明你的设备已经被正确连接了。注意，你每次只应当连接一个设备。例如：

$ adb devices 
List of devices attached emulator-5554 offline # Google emulator 
14ed2fcc device # Physical device

（4）运行应用

现在你可以运行react-native run-android来在设备上安装并启动应用了。

$ react-native run-android
或者
$ yarn android

2. 模拟器调试 ：

我觉得官方的模拟器太不好使，所以我用了 夜神模拟器 进行调试
感兴趣的可以看我这篇文章：《React Native 绑定夜神模拟器进行调试》

本文标签： 环境项目详细NativeReact