Windows平台搭建React Native开发环境

1、安装Java

• JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）
• 环境变量，变量名"JAVA_HOME"，变量值"d:\Java\jdk1.8.0_05"（即JDK的安装路径）
• 环境变量，变量名"Path"，在原变量值的最后面加上“;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin”
• 环境变量，变量名“CLASSPATH”,变量值“.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar”

2、安装Android SDK

• 设置环境变量，变量名"ANDROID_HOME"，变量值：“ E:\Android\sdk”
• 设置环境变量，变量名"Path"，变量值“%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools”

• 打开Android SDK Manager，安装SDK Tools

  
  
  在这里插入图片描述
• 如果以前就是写安卓原生开发的，上面的配置可以忽略

3、安装Node.js

• node.js轻量级的Web服务器
• 下载地址：https://nodejs.org/

• 安装完成后，打开cmd命令窗口，运行node -v，如果安装成功可以看到安装的版本号

  
  
  在这里插入图片描述

4、安装React Native命令行工具

• 由于国外的npm服务器下载太慢了，为了提高下载速度得配置镜：

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

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

• 下载 react-native-cli

npm install -g react-native-cli

在这里插入图片描述

安装完成后可以通过react-native --h查看帮助

在这里插入图片描述

• 完成react-native-cli的下载，到这里我们就完成了所有的基础配置了

5、初始化React-native项目

• 到存放目标项目的路径下，执行react-native init AwesomeProject，AwesomeProject为项目名

• 建成功后，显示如下：

  
  
  在这里插入图片描述

6、运行项目

• 进入项目根目录，执行react-native run-android

  
  
  在这里插入图片描述
• 报错1：

手机界面错误提示：
The development server returned response error code: 500
URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false

在这里插入图片描述

npm服务器端

Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module @babel/runtime/helpers/ interopRequireDefault from D:\RNProject\AwesomeProject\index.js: Module @bab el/runtime/helpers/interopRequireDefault does not exist in the Haste module map

image

• 报错1解决：

首先，按照错误提示修复
npm watchman watch-del-all
npm rm -rf node_modules && npm install
npm rm -rf /tmp/metro-bundler-cache-*
npm rm -rf /tmp/haste-map-react-native-packager-*
发现仍然有错，因为当前安装的react-native-cli的版本为2.0.1 对应react-native版本为0.55.4能正常运行

在这里插入图片描述

通过react-native -v查看当前使用的react-native是最新版本0.57.1

在这里插入图片描述

1、npm install --save [email protected]；

在这里插入图片描述

2、react-native upgrade，一路y，最后提示 Successfully upgraded this project to react-native v0.55.4;

在这里插入图片描述

• 报错2：

:app:generateDebugBuildConfig FAILED
FAILURE: Build failed with an exception.
What went wrong:
Execution failed for task ':app:generateDebugBuildConfig'.
java.io.IOException: Could not delete path 'D:\RNProject\AwesomeProject\android\app\build\generated\source\buildConfig\debug\com'.
BUILD FAILED

在这里插入图片描述

• 报错2解决：

根据提示是android目录下build错误，删掉了android/app/build目录的几个文件夹

在这里插入图片描述

再次运行

• 报错3：

FAILURE: Build failed with an exception.
What went wrong:
Execution failed for task ':app:installDebug'.
com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to finalize session : -26:
Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED

在这里插入图片描述

• 报错3解决：

根据错误提示，是关于项目Android编译版本的问题，参考https://blog.csdn.net/qq_15364915/article/details/68059999一文的解决方法

1. 先修改android 下gradle下wrapper的gradle-wrapper.properties配置文件，
   distributionUrl=https://services.gradle.org/distributions/gradle-3.3-all.zip

2. app下面的build.gradle 文件：buildToolsVersion "25.0.0"

   
   
   在这里插入图片描述

3. android 工程下的build.gradle 文件： dependencies { classpath 'com.android.tools.build:gradle:2.3.0' }

   
   
   在这里插入图片描述
   
   

   然后重新跑工程，运行 react-native run-android ，运行成功了

• 运行结果

  
  
  在这里插入图片描述
  
  
  在这里插入图片描述
  
  
  在这里插入图片描述
  
  

  OK，运行成功了