felix-cao / Blog

A little progress a day makes you a big success!
31 stars 4 forks source link

Window 系统下,React Native 开发环境搭建 #122

Open felix-cao opened 5 years ago

felix-cao commented 5 years ago

请先下载安装 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.dirANDROID_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,不匹配导致的。 解决方法:

如果用夜神模拟器,可能会出现的 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

image

打开提供的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