react-native开发：window下安装与环境配置遇到的问题

大纲

• 如何安装Java JDK?
• 如何安装Android SDK?
• 如何安装react-native?
• 运行react-遇到的问题，以及解决方法

如何安装react-native?

工具/原料

Android SDK

Nodejs

Java Jdk

步骤：

如何安装Java jdk？

1）从 java jdk官网下载

2） Win10如何配置Jdk环境变量

如何安装Android SDK?

用Android Studio工具安装

http://www.cnblogs.com/web-sheena/p/5513087.html

或者下载最新的Android SDK 文件，到官网选择自己想要的版本下载

Android SDK文件，里面有两个应用程序： “SDK Manager.exe”（负责下载或更新SDK包） 和 "AVD Manager.exe"（负责创建管理虚拟机）。我们先运行“SDK Manager.exe”进行SDK下载。

如何下载SDK

如何配置android sdk的环境变量：

1）新建环境变量，ANDROID_HOME：Android SDK Manager的位置

例如我的电脑上面：（ANDROID_HOME=> C:\Users\hsq\AppData\Local\Android\Sdk）

2）设置环境变量PATH：例如：（PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）

如何安装nodejs?

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

下载node.js，找好对应的版本，然后去安装就可以了。
大家可以通过node -v的命令来测试NodeJS是否安装成功

安装react-native命令行工具

译注：由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像，在命令行输入：

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

npm install -g react-native-cli

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

创建react-native遇到的问题：

react-native run-android

现象：

首次运行需要等待数分钟并从网上下载gradle依赖。（这个过程屏幕上可能出现很多小数点，表示下载进度。这个时间可能耗时很久，也可能会不停报错链接超时、连接中断等等——取决于你的网络状况和墙的不特定阻断。总之要顺利下载，请使用稳定有效的科学上网工具。）

运行完毕后可以在模拟器或真机上看到应用自动启动了。

如果apk安装运行出现报错，请检查上文中安装SDK的环节里所有依赖是否都已装全，platform-tools是否已经设到了PATH环境变量中，运行adb devices能否看到设备。

至此，应该能看到APP红屏报错，这是正常的，我们还需要让app能够正确访问pc端的packager服务。

摇晃设备或按Menu键（Bluestacks模拟器按键盘上的菜单键，通常在右Ctrl的左边 或者左Windows键旁边），可以打开调试菜单，点击Dev Settings，选Debug server host for device，输入你的正在运行packager的那台电脑的局域网IP加:8081（同时要保证手机和电脑在同一网段，且没有防火墙阻拦），再按back键返回，再按Menu键，在调试菜单中选择Reload JS，就应该可以看到运行的结果了。

如果真实设备白屏但没有弹出任何报错，可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。

报错一：

F:\react-native开发\projects\react-weather-master>react-native run-android
JS server already running.
Building and installing the app on the device (cd android && gradlew.bat installDebug...

FAILURE: Build failed with an exception.

* Where:
Build file 'F:\react-native开发\projects\react-weather-master\android\app\build.gradle' line: 1

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin [id 'com.android.application']
   > Your project path contains non-ASCII characters. This will most likely cause the build to fail on Windows. Please move your project to a different directory. See http://b.android.com/95744 for details. This warning can be disabled by using the command line flag -Dcom.android.build.gradle.overridePathCheck=true, or adding the line com.android.build.gradle.overridePathCheck=true' to gradle.properties file in the project directory.

* 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: 7.657 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/android-setup.html

分析原因：从上面错误提示，看出是项目目录路径中有中文，导致运行报错

解决方法：将项目复制到一个没有中文的路径文件夹，再进入工程目录，运行react-native run-android

参考资源：

windows 下android react native详细安装配置过程

React Native常见报错