2022-07-06 React Native 开发环境踩坑

1、node

Node 的版本应大于等于 14，但是自己是WIN7系统，安装不了。所以需要按照一下步骤操作：
（1）下载node 14版本，记住一定要下载ZIP结尾的，我下载的是v14.15.0版本。
（2）解压压缩包，覆盖替换到旧的安装目录。我的是C:\Program Files\nodejs
（3）打开命令行，输入 set NODE_SKIP_PLATFORM_CHECK=1，执行它，其作用是忽略平台审查，并设置系统变量NODE_SKIP_PLATFORM_CHECK=1
（4）检查node版本：node -v v14.15.0

2、JDK

React Native 需要 Java Development Kit [JDK] 11，但是公司无法使用Oracle的Java，所以只能安装openJDK，下载路径:https://download.java.net/java/ga/jdk11/openjdk-11_windows-x64_bin.zip
（1）解压到自己指定目录，我的放在D:\tool\jdk-11
（2）设置系统变量JAVA_HOME=D:\tool\jdk-11，并加入到path中
（3）检查版本：javac -version 显示javac 11

3、Android Studio

（1）官网下载：https://developer.android.google.cn/studio/
（2）在安装的过程中，总是要选择java目录，并且怎么设置都显示找不到java.exe。后通过安装了Oracle的Java之后，就可以顺利安装了。安装成功之后，删除Oracle的java。
（3）打开Android Studio，设置openJDK目录：File--->Project Structure--->点击右侧的Gradle Settings--->弹框中选择Gradle JDK的目录为：Android Studio java home version 11 D:\tool\jdk-11

4、使用Android模拟器

首先需要创建一个虚拟设备，创建好了再连接的过程中，一直提示需要安装HAXM，但是一直安装不成功，网上各种方法都尝试了，最终通过在Android Studio的安装目录直接点击exe程序安装即可，我的目录为：D:\tool\Android SDK\extras\intel\Hardware_Accelerated_Execution_Manager中的haxm-7.6.5-setup.exe

5、启动项目

（1）yarn android时报错： java.io.IOException: Unable to delete directory 'D:\demo\AwesomeProject\MyTest\android\app\build\intermediates\dex\debug\mergeLibDexDebug'

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:dexBuilderDebug'.
> java.io.IOException: Unable to delete directory 'D:\demo\AwesomeProject\LuckProject\First\android\app\build\intermediates\project_dex_archive\debug\out'

解决：直接删除了对应目录下的build文件夹
（2）再次yarn android时报错：unable to load script make sure you're either running a metro server...
查阅文档说是要先使用：yarn start---->又报端口占用的错，干掉占用端口，再次yarn start，项目成功启动。

6、yarn android时，node程序报错闪退

项目之前启动都是OK的，但是电脑强制重启之后，发现无法启动了，各种网上给的方法都不行，后面通过netstat -ano|findstr 8081 把端口都干掉之后，重启就正常了，为什么会出现这种情况，未知。。。。。

7、react-native-debugger

默认的debugger-ui只能看一些console的内容，发现network看不了请求信息，需要修改配置文件，步骤如下：
（1）下载后打开工具，在工具栏的Debugger中找到open config file打开配置文件
（2）修改配置文件中的defaultNetworkInspect选项（将永久启用网络检查）。设置为true
（3）重新加载reload模拟器后即可查看network，成功！

8、dev server returned error code 403 react native

APP 启动成功，但是一直模拟器一直报403
（1）切换端口
yarn react-native start --port=8088
（2）成功启动之后，在模拟器中Ctrl+M，选择Change Bundle Location，编辑为：localhost:8088，然后reload，这时候浏览器可以访问到http://localhost:8088/debugger-ui/
（3）建立连接
adb devices
建立连接：
adb -s emulator-5554 reverse tcp:8088 tcp:8088
emulator-5554 换成adb devices 的名字
（4）模拟器中reload，但是报错timeout while connecting to remote debugger
在模拟器中Ctrl+M，选择Debug，重新bundle之后，成功运行了

9、React Navigation

(1)根据React Navigation官网中，操作安装指定依赖包

  "@react-navigation/native": "6.0.10",
  "@react-navigation/native-stack": "6.2.1",
  "react-native-safe-area-context": "3.3.2",
  "react-native-screens": "~3.10.1"

安装依赖包启动时，报错：

Execution failed for task ':app:compileDebugKotlin'.

解决：在android/build.gradle文件中，添加如下代码：

buildscript {
ext {
    kotlinVersion="1.5.31"
  }
}

然后重启，Run app，会报错：Error: Error Launching activity，此时只需要点击Run app旁边的按钮（Apply Changes an Restart Activity即可）