开发环境搭建
跟着用最新的版本号用命令又跟着创建了一个React Native搭建基本的 React Native 开发环境。
其中耗时了一天 遇到了各种各样的问题,记录一下 供以后参考:
环境配置
JDK版本修改
jdk的问题 看0.7.6吧呢本官网上要用jdk17 注意就跟着一起同步配置 不然中间也是各种奇奇怪怪的问题。 这里要修改java_home 以及Android Studio的gradle里面的jdk版本
.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插件。
基本上需要跟着文档走, 之前有的和文档上的有差异没管 各种奇怪的问题
创建RN工程
参考了很多网上的让换源,没用。我本身已经是淘宝的镜像源了。 后来发现是网络问题。 这里强烈建议开个人热点下载、 中间又出现了两个奇奇怪怪的问题。
- 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废弃掉了。
参考资料
-
gradle加镜像 AndroidStudio 设置gradle从国内镜像网站下载 gradle不同版本下载太慢---腾讯做了国内镜像可以直接下载
-
或者把把gradle所需要的版本号从远程下载 本地的gradlewrapper里面替换 修改 gradle-wrapper.properties 里面的 distributionUrl 将其指向自己本地的 zip 包
-
中间遇到下载很慢的包 可以仓库下载 然后放在本地目录里 详细教程看这个各种包下载不下来,下载超时
编译阻塞问题
"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
运行时也发现几个问题:
-
端口号没有被占用 8081端口杀死
-
启动了但是一直停留在loading from,页面一直是白的, metro只展示图标。
这些步骤是用于解决 React Native 项目中可能出现的缓存和依赖问题的常见方法。每个步骤的作用如下:
-
清除 Watchman 监视:
- 命令:
watchman watch-del-all
- 作用:Watchman 是一个文件监视服务,用于监控文件系统的更改。此命令用于清除所有当前的监视状态,确保 Watchman 不会因为旧的监视状态而引起问题。
- 背景:有时,Watchman 的监视状态可能会变得不一致,导致文件更改不能正确触发构建或更新。
- 命令:
-
删除
node_modules
文件夹并重新安装依赖:- 命令:
rm -rf node_modules && npm install
- 作用:删除当前的
node_modules
文件夹,然后重新安装所有的 npm 依赖项。 - 背景:有时候,
node_modules
中的文件可能会损坏或版本不兼容,重新安装可以确保依赖项的正确性。
- 命令:
-
重置 Metro Bundler 缓存:
- 命令:
rm -rf /tmp/metro-bundler-cache-*
- 作用:删除 Metro Bundler 的缓存文件。
- 背景:Metro Bundler 是 React Native 的打包工具,它会缓存一些文件以加速构建过程。缓存可能会导致旧代码或错误代码被使用,清除缓存可以确保使用最新的代码。
- 命令:
-
移除 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>