ReactNative开发环境搭建和运行第一个项目（Win10）-优快云博客

本文详细介绍了在Windows平台上搭建React Native开发环境的过程，包括安装Node.js、配置npm镜像、安装React Native命令行工具、配置Android Studio及SDK、环境变量设置等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

https://blog.youkuaiyun.com/applek_case/article/details/80183938

我用的是windows平台，所以这儿只介绍Win平台的环境搭建。

必要软件安装

1.node.js

下载地址：https://nodejs.org/en/

左边8.11.1LTS为稳定版，右边为最新版，随便下载一个即可。我下载的是10.0.0版本。

下载完成后安装，可以一路安装下去，当然了安装目录默认为C盘,可以更换到D盘。

安装完成后使用cmd命令：node -v，如图显示版本号即为安装成功。

安装好以后，请设置一下node的镜像下载地址，改为国内的地址。这个地址为淘宝提供的镜像，速度比较快。

直接在cmd命令里面键入这两条命令即可。

Shell

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

2.安装React Native命令行工具

安装这个很简单，因为安装了node了，直接打开cmd命令，键入以下安装代码即可

Shell

1	npm install -g react-native-cli

3.Android Studio

由于win平台只能开发安卓版本的app，所以还是用Android Studio来的实在。

首先需要安装java环境，需要JAVA JDK 1.8以上版本

下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

选择符合自己电脑的jdk即可。如果你觉得上面去选择麻烦，那么点击这儿直接下载64位的JDK

安装完成后，你的C:\Program Files (x86)\Java目录里面应该有这两个文件夹，只要是1.8开头的就行了，后面的版本号不用在意

接着安装Android Studio，下载地址转站国内的网站：http://www.android-studio.org/

现在国内提供的版本最新为3.0.1，直接点击下载即可，只要是Android Studio2.0版本以上就能搞了

下载安装后，需要下载Android SDK。在欢迎界面选择菜单，选择SDK Manger（PS：软件才开始安装的界面背景是白色的，我这儿已经设置了主题，不用在意）

接着需要我们来配置SDK了。首先第一个，记住SDK的目录，我这儿的目录为D:\Android\SDK。大家最好不要设置到C盘，因为SDK文件太大了，C盘容易造成磁盘空间不足，可以设置到其他的目录，另外目录不能包含中文和空格

勾选右下角的Show Package Details选项，即可显示所有的SDK版本。我们选择react nactive支持的SDK6.0版本

接着选择SDK Tool选项，选择支持的23.0.1版本，其他不用勾选，图上面的是我开发其他安卓版本自动下载的。到时候大家开发其他版本的时候会自动提示的。

接着拉到最下面，选择如图中的Tools,有SDK管理器，还有CPU虚拟化的工具，当然是你是AMD的处理器，就不用选Intel X86那一个。

选择完以后，点击OK，就会弹出窗口，让他慢慢下载。其实下载这个东西不用翻墙，速度挺快的。

环境变量的设置

安装上面的软件搞定以后，需要配置一下环境变量。

我的电脑右键-属性-高级系统设置-环境变量

点击新建，ANDROID_HOME变量，设置目录为SDK目录，这个目录就是之前下载SDK的目录。

添加好后，双击Path项目编辑，再添加两条数据，一个是tools目录和platform-tools目录。

构建第一个React Nactive项目

完成上述操作后，运行cmd命令，然后切换到一个非中文和空格的目录，准备创建一个项目

如图，我在打算在F:\code\ReactNative目录下创建项目，自行选择目录即可

键入以下代码

Shell

1	react-native init FirstProject

其中FirstProject为项目名称，自行修改即可

现在就等着吧，让他慢慢下载，差不多要等个10分钟左右，如图为正在下载

下载完成后，就可以看到你的目录下面出现一个目录了，这个就是下载好以后的react nactive项目了，其中我们需要关注的目录是android这个目录文件夹了。

使用Android Studio打开这个目录

等构建完成，这儿最好开启翻墙软件，因为要下载很多gradle文件，相当的慢。

然后启动一个模拟器,如何设置模拟器请自行百度。我这儿使用的是第三方模拟器。

又要等着慢慢的构建，等待构建完成，自动安装到模拟器上面。安装完成后，应该会遇到第一个错误啦

新版本文件名已经从index.android.js变为了index.js;然而并没有使用asset存放index.android.bundle等文件。所以需要我们手动设置

按照步骤：

进入项目的android\app\src\main 新建assets文件夹

然后键入如下命令

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

完成后，重新运行APP，先停止运行，再运行

运行成功后效果如图

至此，整个环境就搭建完成了。

当然了，后续要完整的跑起来所有项目

还需要安装git和Python 2,请自行下载即可。

转载于:https://my.oschina.net/u/1266171/blog/2056216