React Native 环境搭建-01.02

468 阅读5分钟

开发环境搭建

react native安装环境搭建

跟着用最新的版本号用命令又跟着创建了一个React Native搭建基本的 React Native 开发环境。

其中耗时了一天 遇到了各种各样的问题,记录一下 供以后参考:

环境配置

JDK版本修改

jdk的问题 看0.7.6吧呢本官网上要用jdk17 注意就跟着一起同步配置 不然中间也是各种奇奇怪怪的问题。 这里要修改java_home 以及Android Studio的gradle里面的jdk版本

image.png

.bash_profile 文件里面的值

JAVA_HOME=/Users/liuwenjing/Library/Java/JavaVirtualMachines/azul-17.0.12/Contents/Home
PATH=$JAVA_HOME/bin:$PATH:.
CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
export JAVA_HOME
export PATH
export CLASSPATH

#GRADLE

GRADLE_HOME=/Users/liuwenjing/Documents/gradle-6.7.1
PATH=${PATH}:${GRADLE_HOME}/bin
export GRADLE_HOME  PATH


#ANDROID

ANDROID_HOME=/Users/liuwenjing/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools


export PATH=$PATH:/Users/liuwenjing/Library/Android/sdk/ndk/26.0.10404224/toolchains/llvm/prebuilt/darwin-x86_64/bin


export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion


Android Studio下载最新

还有这里老版本的Android Studio 没看到有Android14 需要下载新版本的Android Studio!并且新版本的才能支持到8.6的gradle插件。

image.png 基本上需要跟着文档走, 之前有的和文档上的有差异没管 各种奇怪的问题

创建RN工程

image.png

参考了很多网上的让换源,没用。我本身已经是淘宝的镜像源了。 后来发现是网络问题。 这里强烈建议开个人热点下载、 中间又出现了两个奇奇怪怪的问题。

  • fetch failed. 刚开始以为是nrm源的问题。但其实就是网不好。一直npx 创建项目的时候才会报错
  • gradle下载成功了 但是依赖下载报错 网不好

工程创建好之后,

安装依赖

1.安装RN的依赖

yarn 

2. Native依赖 用Android打开android目录。依次修改以下两个文件

  • 替换gradle的镜像源
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https://mirrors.cloud.tencent.com/gradle//gradle-8.10.2-all.zip
networkTimeout=10000 
validateDistributionUrl=true
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

  • 替换各个依赖的镜像源

用家里的网下载速度那是相当的慢。三个小时,gradle的进度条那是一点都不动阿 😅


buildscript {
    ext {
        buildToolsVersion = "35.0.0"
        minSdkVersion = 24
        compileSdkVersion = 35
        targetSdkVersion = 34
        ndkVersion = "26.1.10909125"
        kotlinVersion = "1.9.24"
    }
    repositories {
        maven { setUrl("https://maven.aliyun.com/repository/central") }
        maven { setUrl("https://maven.aliyun.com/repository/google") }
        maven { setUrl("https://maven.aliyun.com/repository/gradle-plugin") }
        maven { setUrl("https://maven.aliyun.com/repository/public") }
        maven { setUrl("https://jitpack.io") }
        google()
//        ————————————————
//
//        版权声明:本博客为博主个人原创文章,如若转载请附上本文出处链接和本声明。请勿未声明随意转载与恶意修改!
//
//   https://blog.csdn.net/weixin_45126177/article/details/143744061
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
    }
}

allprojects {
    repositories {
        maven { setUrl("https://maven.aliyun.com/repository/central") }
        maven { setUrl("https://maven.aliyun.com/repository/google") }
        maven { setUrl("https://maven.aliyun.com/repository/gradle-plugin") }
        maven { setUrl("https://maven.aliyun.com/repository/public") }
        maven { setUrl("https://jitpack.io") }
        google()
    }
}


apply plugin: "com.facebook.react.rootproject"
  • 这里不要加jcenter 否则会提示再Gradle9废弃掉了。

参考资料

编译阻塞问题

"RNGP - Autolinking: Could not find project.android.packageName in react-native config output! Could not autolink packages without this field."

发现代码里的autolinking.json里面是空的,所以报错了,认为不是一个有效的json文件,缺失关键信息。我觉得这个可能是之前gradle依赖下载的时候有依赖下载失败导致的。具体解决。

stackoverflow.com/questions/7…

**Solution to Autolinking Error in React Native:**

If you're facing the error: Execution failed for task ':app:generateAutolinkingPackageList'.

> RNGP - Autolinking: Could not find project.android.packageName in react-native config output! Could not autolink packages without this field.

**Follow these steps to fix it:**

*1. Remove the autolinking.json file:*

**run **=> rm -rf android/build/generated/autolinking/autolinking.json

*2. Clean the Android build:*  cd android ./gradlew clean

*3.Rebuild the Android project:*  cd .. yarn react-native run-android

*4.Clear the Metro cache:*  yarn start --reset-cache

if not using yarn  
cd .. && npx react-native run-android

npx react-native start --reset-cache

**These steps should resolve the autolinking issue and allow the project to build successfully.**



运行

npx react-native run-android

运行时也发现几个问题:

  1. 安装时报错 需要删除之前的包> java.util.concurrent.ExecutionException: com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package com.example.prebuiltcall signatures do not match previously installed version; ignoring!

  2. 端口号没有被占用 8081端口杀死

  3. 启动了但是一直停留在loading from,页面一直是白的, metro只展示图标。

这些步骤是用于解决 React Native 项目中可能出现的缓存和依赖问题的常见方法。每个步骤的作用如下:

  1. 清除 Watchman 监视

    • 命令watchman watch-del-all
    • 作用:Watchman 是一个文件监视服务,用于监控文件系统的更改。此命令用于清除所有当前的监视状态,确保 Watchman 不会因为旧的监视状态而引起问题。
    • 背景:有时,Watchman 的监视状态可能会变得不一致,导致文件更改不能正确触发构建或更新。
  2. 删除 node_modules 文件夹并重新安装依赖

    • 命令rm -rf node_modules && npm install
    • 作用:删除当前的 node_modules 文件夹,然后重新安装所有的 npm 依赖项。
    • 背景:有时候,node_modules 中的文件可能会损坏或版本不兼容,重新安装可以确保依赖项的正确性。
  3. 重置 Metro Bundler 缓存

    • 命令rm -rf /tmp/metro-bundler-cache-*
    • 作用:删除 Metro Bundler 的缓存文件。
    • 背景:Metro Bundler 是 React Native 的打包工具,它会缓存一些文件以加速构建过程。缓存可能会导致旧代码或错误代码被使用,清除缓存可以确保使用最新的代码。
  4. 移除 Haste 缓存

    • 命令rm -rf /tmp/haste-map-react-native-packager-*
    • 作用:删除 React Native 的 Haste 缓存文件。
    • 背景:Haste 是 React Native 使用的一种模块系统,缓存可能会导致模块解析错误或冲突,清除它可以解决这些问题。


I got the same issue, after following the following steps, it got resolved the issue

1.  Clear watchman watches`watchman watch-del-all`.
1.  Delete the node_modules folder`rm -rf node_modules && npm install`.
1.  Reset Metro Bundler cache`rm -rf /tmp/metro-bundler-cache-*`
1.  Remove haste cache`rm -rf /tmp/haste-map-react-native-packager-*`




<https://stackoverflow.com/questions/55441230/unable-to-load-script-make-sure-you-are-either-running-a-metro-server-or-that-yo?page=2&tab=scoredesc#tab-top>