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/ interopRequireDefaultfromD:\RNProject\AwesomeProject\index.js: Module@bab el/runtime/helpers/interopRequireDefaultdoes 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 react-native@0.55.4；
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一文的解决方法
- 先修改android 下gradle下wrapper的gradle-wrapper.properties配置文件，
distributionUrl=https://services.gradle.org/distributions/gradle-3.3-all.zipapp下面的build.gradle 文件：buildToolsVersion "25.0.0"
在这里插入图片描述android 工程下的build.gradle 文件： dependencies { classpath 'com.android.tools.build:gradle:2.3.0' }
在这里插入图片描述
然后重新跑工程，运行 react-native run-android ，运行成功了
-
运行结果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
OK，运行成功了
