Windows下搭建React-Native开发环境及异常处理

React-Native中文教程

https://reactnative.cn/docs/0.51/getting-started.html#content

但是我觉得上面的教程有很多没必要的

我现在分享下我搭建的开发环境过程

1、安装Java

安装1.8以上即可，并设置环境变量

win+r 输入cmd 执行

java -version

2、安装Android SDK

下载地址 http://www.androiddevtools.cn/

选择对应的平台，可同时下载Android Studio

安装方法该网址有详细讲述，这里不再赘述

在设置SDK的环境变量时必须要为 ANDROID_HOME，否则会在后面报错，原因我在后面讲解。

3、设置SDK

打开Android SDK Manager。 

选中以下项目： 

Android SDK Build-tools version 23.0.1 

Android 6.0 (API 23) 

Android Support Repository 

Local Maven repository for Support Libraries 

下面是开始正式的RN环境配置了

4、安装node

这货是基于js的，node.js轻量级的Web服务器，想要是React Native跑起来需要安装node， 如果没有安装node.js，先去官网安装node.js.

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

下载推荐版就可以，箭头所示

下载后安装在你指定的路径并记住安装的路径

我的路径D:\Frank_Ghost_Install\Node

安装后打开cmd命令输入

node -v

显示如图所示则代表安装成功（并自动写入环境变量了）

可以使用命令查看

echo %PATH%

5、安装git（也可不需要安装，建议安装）

下载地址https://git-scm.com/downloads

选择对应的版本即可

安装后设置环境变量

变量名设置为

GIT_HOME

路径为你安装git的路径

设置完毕后再cmd命令窗口执行

git --verison

查看版本信息即可

6、安装react-native命令行工具react-native-cli

打开命令行，输入 

npm install -g react-native-cli ， 注意注意 ：react为小写，如果网络不行的话配置国内镜像如下： 

npm config set registry  https://registry.npm.taobao.org  

npm config set disturl  https://npm.taobao.org/dist  

这时候在命令行输入react-native命令就可以使用了。 

新建一个目录，如：“D:/react-native/projects”，到这个目录下，打开命令行，输入：react-native init HelloWorld命令，新建一个工程，使用这个配置的可直接跳转到下面的第7步  

或着使用如下步骤下载配置（git配置完成后）

1) 在命令行中进入你希望RN安装的目录

2) 输入 git clone https://github.com/facebook/react-native.git ，可指定路径clone

（或者  git clone git@github.com:facebook/react-native.git）等待下载 

如没安装git的打开网页或在gihub搜索react-native

下载

下载完后解压可指定路径解压

以上步骤完成后

3) 进入刚刚目录下的react-native目录下的react-native-cli目录，输入 npm install -g  

安装好之后，可以命令行下就有react-native命令了

接下来咱们测试一下

在cmd命令窗口输入(这里说明一下所有cmd命令窗口是新开窗口)

react-native -v

7、创建RN项目

进入你希望创建项目的目录后，输入 react-native init HelloWorld ，(这里 HelloWorld 为工程名)等待一段时间

运行成功

项目目录结构

7、运行package

然后切换到刚才的工程目录下，cmd命令窗口输入

react-native start

运行完之后

然后在浏览器输入 注意老版本（低于0.49）的地址为 http://localhost:8081/index.android.bundle?platform=android 或 http://localhost:8081/index.bundle?platform=android ，若是能打开看见下面就证明服务器就可以了。 

第一个地址打开是:

第二个的打开是

如果你遇到了 ERROR Watcher took too long to load 的报错，请尝试修改 node_modules/react-native/packager/react-packager/src/FileWatcher/index.js ，将其中的MAX_WAIT_TIME 从25000改为更大的值（单位是毫秒）

8、运行项目并调试

连上手机或模拟器（模拟器我使用的Android Emulator），在cmd命令窗口输入

adb devices

查看手机是否确定连上，如果显示有设备则证明已经连上设备。 

如需了解adb命令详解这里不作讲解，可自行百度。

1、如果手机是android5.0及以上的系统，则在cmd命令窗口输入：

adb reverse tcp:8081 tcp:8081

即可连接上服务器调试，随后运行

在HelloWorld目录下执行以下命令

react-native run-android

即可运行在手机或模拟器上。 

运行成功后是如下图

模拟器截图

2、如果是android5.0以下的机器，则先再在工程目录下使用

react-native run-android命令运行工程，随后摇晃手机选择Dev Settings，选择Debug server host & port for device输入ip地址加端口号，如“192.168.0.1:8081”。 

如在执行

react-native run-android命令时报如下错误

FAILURE: Build failed with an exception.

* What went wrong:

A problem occurred configuring project ':app'.

> SDK location not found. Define location with sdk.dir in the local.properties f

ile or with an ANDROID_HOME environment variable.

* Try:

Run with --stacktrace option to get the stack trace. Run with --info or --debug

option to get more log output.

BUILD FAILED

Total time: 4.304 secs

Could not install the app on the device, read the error above for details.

Make sure you have an Android emulator running or a device connected and have

set up your Android development environment:

https://facebook.github.io/react-native/docs/getting-started.html

本人的出错的原因是上述讲到的sdk环境变量设置的变量名错误

修改为 ANDROID_HOME即可

ANDROID_HOME变量名在react-native使用时有引用此变量名，如果不是此变量名则会提示SDK未找到 SDK location not found。

至此则环境安装完毕。

如有疑问可询问抑或是百度查看。

如要打离线包可百度搜索

ReactNative - 打离线包

欢迎关注微信号：魅影响

或扫描下方二维码关注

往期推送

1、内存的快捷方式-指针

2、程序员必备知识计算机数据存储（上）

3、Windows下腾讯应用宝认领应用步骤

4、最全Windows下搭建go语言开发环境以及开发IDE