美文网首页
2022-07-06 React Native 开发环境踩坑

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

作者: 快乐女孩筱梅 | 来源:发表于2022-07-06 11:49 被阅读0次

    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即可)

    相关文章

      网友评论

          本文标题:2022-07-06 React Native 开发环境踩坑

          本文链接:https://www.haomeiwen.com/subject/jmqybrtx.html