Window 系统下，React Native 开发环境搭建

[felix-cao]

请先下载安装 Android Studio， 本文主要是使用了 React Native 自带的命令工具 react-native-cli

一、安装 Cygwin

Cygwin是一个用于在Windows上模拟Linux环境的软件，官网， 下载地址

图1、选择 `Direction Connection`

图2、选择镜像网站`ftp://mirrors.xmission.com`

图3、选择安装包中搜索`curl、unzip、zip`，并选择安装

安装完成后打开 Cygwin, 看是否能使用 curl、unzip、zip命令，如果不可以再重新装一遍。

二、安装 nvm 及 Nodejs

若已安装了 Nodejs, 可略过此步。

2.1、安装 nvm

nvm for window 下载地址，选择 nvm-setup.zip, 解压后安装即可。也可直接去 Nodejs 官网去下载安装 windwos Nodejs

2.2、使用 nvm 安装 Nodejs

打开 Cygwin, 使用 nvm 下载 Nodejs

nvm install node

三、安装 React Native

3.1、安装 react-native

打开 cygwin, 输入

npm install -g react-native-cli

3.2、初始化

安装成功后初始化一个 React Native 项目

react-native init hello

3.3、启动 Metro Bundler

react-native start

3.4、启动模拟器

启动 Android Studio 并打开 /hello/android/, 启动模拟器，如下图

您也可以选择 Genymotion 作为您的模拟器，这里有一篇非常详细的文章介绍 《Android开发最强模拟器Genymotion的安装及使用教程。附注释图详解》

3.5、跑一把了

现在可以在 android 中跑一把了， 如果安装过程中失败，重试一把，如果还是不行，请参考四 error and solution

react-native run-android

四、 Error and Solution

坑比较多，在此收集，还请有坑的在下面留言。

4.1、sdk.dir 或 ANDROID_HOME 错误

解决办法：配置一下 ANDROID_HOME

vi ~/.bash_profile

shift + g 到行尾，shift + insert 输入如下内容

export ANDROID_HOME=c:/Users/sunwin/AppData/Local/Android/Sdk

这个 Android SDK 是在安装完 Android Studio 后自动给你下载的。

4.2、com.facebook.fresco 依赖出错

错误提示：

Could not determine artifacts for com.facebook.fresco:fresco:1.10.0: Skipped due to earlier error

这个是由于网络原因导致无法下载 com.facebook.fresco.
解决办法：
要么多试几次，要么开启 vpn 代理，vpn 代理参考 《Mac 命令行翻墙》 #81

4.3、No connected devices!

错误提示：

com.android.builder.testing.api.DeviceException: No connected devices! 

很明显，没有开启模拟器嘛。
解决办法： 按照 3.4 启动一下模拟器。

4.4、Could not create ADB Bridge

原因：没有启动adb
解决办法：adb connect 127.0.0.1:62025

4.5、adb server version (32) doesn't match this client (40)

原因：模拟器的 adb 版本是32, android-sdk里面的adb版本是40，不匹配导致的。
解决方法：

• 我的电脑 -> 右键属性 -> 系统变量 -> Path -> 找到 adb 的位置 ， 发现是 D:\adb 文件夹

• cmd 命令行中输入 adb version 得到 Android Debug Bridge Version 1.0.32 ，发现版本是 32

• 打开 Android Studio , File -> other setting -> Default Project Structure, 找到 Android Studio 中 SDK 的位置 C:\Users\sunwin\AppData\Local\Android\Sdk。

  至此， 我们找到adb的位置： C:\Users\sunwin\AppData\Local\Android\Sdk\platform-tools, 将系统环境变量中的adb改为这个位置
  如果还不行，可以先kill掉 adb.exe, 请参考 《Android ADB server didn't ACK * failed to start daemon * 简单有效的解决方案》

如果用夜神模拟器，可能会出现的 adb version 不一致，请将这里的adb.exe复制改名为 nox_adb.exe 放到 D:\Program Files\Nox\bin

4.6、Android dependency 依赖冲突

错误提示：

Execution failed for task ':app:preDebugBuild'.
> Android dependency 'com.android.support:support-v4' has different version for the compile (26.1.0) and runtime (27.1.1) classpath. You should manually set the same version via DependencyResolution

解决办法：
在android/app/build.gradle，dependencies添加一行

dependencies {
    //PART TO ADD

    implementation "com.android.support:support-v4:27.1.1" 
}

4.7、找不到 lint-gradle-api.jar

打开提供的Search URL 是404： https://jcenter.bintray.com/com/android/tools/lint/lint-gradle-api/26.1.2/lint-gradle-api-26.1.2.jar
解决办法：将 android/build.gradle 文件中 com.android.tools.build:gradle:3.1.2 改为 com.android.tools.build:gradle:3.1.3, 见 github