macOS react-native踩坑记录

masOs 运行 react-native的坑

八分钟de温暖

3316人浏览 · 2022-06-02 16:00:39

八分钟de温暖 · 2022-06-02 16:00:39 发布

1、运行npx react-native run-android，报错 Android project not found. Are you sure this is a React Native project?

解决方案：原因是运行命令的路径不正确
在这里插入图片描述

2 React Native 项目修改代码。重新打包无效果

参考文章
1、项目根目录下运行此命令

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

1、运行命令时出现 (macOS)
react-native command not found

解决：1、查看node的安装位置

which node

我的安装路径
/usr/local/bin/node

2、打开系统环境变量配置文件
VI 的详细使用方法

vi ~/.zshrc

3、配置环境变量

export NODE_SDK_ROOT=usr/local
export PATH=$PATH:$NODE_SDK_ROOT/bin

执行安装Homebrew /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)” 报错Mac: Failed to connect to raw.githubusercontent.com port 443: Connection refused error:

墙的问题（域名解析污染）
在 https://www.ipaddress.com/ 查询 raw.githubusercontent.com 的真实IP。

sudo vi /etc/hosts
 
199.232.28.133 raw.githubusercontent.com

Mac os 使用brew install 安装工具时报错 fatal: not in a git directory Error: Command failed with exit 128: git

卸载：

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/HomebrewUninstall.sh)"

执行：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装git

Git 原下载地址（速度慢）： https://git-scm.com/download/mac
Git 国内镜像地址（速度快）： https://www.newbe.pro/Mirrors/Mirrors-Git-For-MacOS/

安装HomebrewCN

Homebrew国内源

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

Homebrew 国内自动安装脚本，修改原脚本中的 clone 操作为“浅拷贝”（–depth 1), 克隆速度快了十几倍。

/bin/zsh -c "$(curl -fsSL https://gitee.com/jyotish/HomebrewCN/raw/master/Homebrew.sh)"

brew install watchman 报错Error: Cannot install in Homebrew on ARM processor in Intel default prefix (/usr/local)!

解决方案：arch -x86_64 brew install watchman 替换 brew install watchman

Error: spawnSync ./gradlew EACCES

我们看到实际的错误就是 Error: spawnSync ./gradlew EACCES 一番搜索之后，发现其实是 gradlew 没有执行权限

我们给它个 755 权限试试，

sudo chmod +x ./android/gradlew

其实这个 gradlew 才是 android 构建的关键…

error: Watchman error: std::__1::system_error: open: /Users/cqct/Documents/wchy/work/project/react-native/scf/react-native-base-scf: Operation not permitted. Make sure watchman is running for this project. See https://facebook.github.io/watchman/docs/troubleshooting.html.

在这里插入图片描述
解决方案:记得设置完，重启电脑

React Native MacOS Catalina Watchman Response Error Operation not Permitted

在这里插入图片描述

1: Mac下/usr/local目录默认是对于Finder是隐藏，如果需要到/usr/local下去，打开Finder，然后使用command+shift+G，在弹出的目录中填写/usr/local就可以了。
2: 还有一种查看方式就是在命令行中：cd /usr/local
然后再使用ls就可以查看下面安装的东西了。

再不行的话，更换watchman的版本。是watchman 版本有问题

欲哭无泪。。。我先前的版本是2022.05.30 现在我更换的版本是2022.05.23.00。。。居然得行了，能热更新，能愉快的玩耍了…然后过了一个周，又不行了

最终解决方案
SIP系统怎么禁用？苹果M1芯片电脑SIP系统完整性保护关闭方法
果断关闭SIP系统
步骤：
1、关机
2、按住开机键不松手直到出现下图的画面，然后点击选项,点击继续
3、点击实用工具>点击终端
4、终端内输入命令：csrutil disable然后回车执行(注意中间有个空格)
5、输入y，然后按下回车键
6、输入您的电脑密码，然后按下回车
7、出现 System Integrity Protection is off. 证明 SIP 已成功关闭。
8、输入 reboot 然后按下回车也就是 return 键重启电脑即可

如果后期想再开启 SIP，只需要将上面第 5 步的 csrutil disable 换成 csrutil enable 即可。

报错:Unable to load script.Make sure you’re either running a metro server（run ‘react-native start’ ） or that your bundle ‘index.android.bundle’ is packaged correctly for release.

我自己这里报错原因是没有找到index.android.bundle
修改项目目录/android/app/build.gradle里

project.ext.react = [
    enableHermes: false,  // clean and rebuild if changing
    bundleAddetName:"index.android.bundle",
    bundleInDebug:true,
    bundleInAlpha:true,
    bundleInBeta:true
]

homebrew 安装旧版本

命令 brew install watchman 默认安装最新的版本

但是我们要安装旧版本怎么办呢？
1、执行命令，查看源信息

brew info watchman

在这里插入图片描述

2、打开网址，克隆项目

https://github.com/Homebrew/homebrew-core

git clone https://github.com/Homebrew/homebrew-core

3、找到
在这里插入图片描述

4、找到提交的历史记录

git log ./Formula/watchman.rb | less

5、找到你要安装的版本
在这里插入图片描述

6、切换到对应的commit

git checkout 526b282b3a9c9d1a580028742889623ce93302f6

7、ch 在这里插入图片描述
8、执行安装,

arch -x86_64 brew install /Users/cqct/Documents/wchy/work/project/react-native/watchman.rb

formulae 意思是一些软件包(SDK)，一般是命令行工具、开发库、一些字体、插件，共性是不提供界面，提供给终端或者是开发者使用。
cask 是用户软件(APP)，比如 chrome、mvim、wechat、wechatwork 这些提供用户交互界面的软件。

安装报错：Error: Failed to load cask: /Users/cqct/Documents/tmp/homebrew-core/Formula/watchman.rb
Error: Couldn’t find manifest matching bottle checksum.

brew install watchman 安装时，安装的不是最新的版本，执行下面的命令后，及安装的是最新的
建议定期运行brew update && brew upgrade来使您的应用程序保持最新状态。

brew update && brew upgrade

Mac 下使用 chmod 修改文件权限
chmod 用户+操作+权限文件

用户部分: 使用字母 u 表示文件拥有者 (user), g 表示拥有者所在群组 (group), o 表示其他用户 (other), a 表示全部用户 (all, 包含前面三种用户范围)
操作部分: + 符号表示增加权限, - 符号表示取消权限, = 符号表示赋值权限
权限部分: r 符号表示可读 (read), w 表示可写 (write), x 表示可执行权限 (execute)
sudo chmod 777 -R tomcat

sudo 为系统超级管理员权限.
chmod 改变一个或多个文件的存取模式
三个数字从前到后分别表示 u、g、o 三种用户类型的访问权限
755 代表用户对该文件拥有读、写、执行的权限, 同组的其他人员拥有执行和读的权限, 没有写的权限, 其它用户的权限和同组人员一样.
777代表, user, group ,others ,都有读写和可执行权限
-R 可选, 递归修改目录文件及其子目录中的文件类型

/bin/sh: ./gradlew: Permission denied

在这里插入图片描述
【Gradle深入浅出】——初识Gradle

程序包com.facebook.react 不存在

解决方案解决方案帖子在这里插入图片描述

22年11月4日后安卓编译出错的问题

def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())

allprojects {
    configurations.all {
        resolutionStrategy {
            // Remove this override in 0.65+, as a proper fix is included in react-native itself.
            force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION
        }
    }

搞了两三天。。。遇到问题还是要在源码 issues下找答案啊。。想哭。。。

react-native 执行 yarn android 命令时报错 error Unrecognized command “run-android”.

在 React Native 0.60 版本中，react-native run-android 命令被废弃。从那个版本开始，React Native 引入了自动链接（Auto Linking）功能，它会自动将原生模块链接到 Android 项目中，无需手动执行 react-native link 命令。

取而代之的是，你可以使用以下命令来运行 React Native 项目：

npx react-native start
这将启动 Metro Bundler，用于打包和提供 JavaScript 代码。然后，你可以在另一个终端窗口中运行以下命令来安装并运行应用程序：

npx react-native run-android
这样，你就可以在连接的 Android 设备或模拟器上运行 React Native 应用程序了。

请注意，上述命令需要在正确配置了 Android 开发环境的情况下才能正常运行。确保你已经安装了 Android SDK，并正确设置了相关的环境变量。另外，你还需要确保你的 Android 设备或模拟器已正确连接到计算机。

如果你使用的是 React Native 0.59 版本或更早的版本，react-native run-android 命令仍然可用，并且需要手动执行 react-native link 命令来链接原生模块。但是，从 React Native 0.60 版本开始，这个命令被废弃并替代为上述的命令序列。

查看当前react-native 运行的版本

npx react-native --version

npm,yarn,npx 的区别

npm、yarn 和 npx 都是用于管理和构建 JavaScript 项目的工具，但它们有一些区别和不同的用途。

npm（Node Package Manager）：npm 是 Node.js 的官方软件包管理器。它是默认随 Node.js 一起安装的，并且是大多数 JavaScript 项目的常用选择。npm 可以用于安装、更新和删除项目依赖的软件包，以及执行各种构建和脚本任务。通过 package.json 文件来管理项目的依赖关系和脚本命令。

yarn：yarn 是由 Facebook 开发的另一个 JavaScript 包管理工具。它在性能和安全性方面进行了优化，并提供了一些额外的功能。yarn 具有与 npm 相似的功能，可以安装、更新和删除软件包，并且也使用 package.json 文件来管理项目。yarn 在处理依赖关系和并行下载方面通常比 npm 更快。

npx：npx 是 npm 5.2.0 版本引入的一个工具。它的作用是临时安装和运行具有特定版本的软件包。npx 可以在不全局安装软件包的情况下，直接运行软件包的可执行命令。它非常方便，特别适用于运行一次性命令或者在项目中使用特定版本的工具。

总结一下：

npm 是 Node.js 的官方软件包管理器，用于安装、更新和删除软件包，管理项目的依赖关系和脚本任务。
yarn 是由 Facebook 开发的另一个包管理工具，具有与 npm 相似的功能，但在性能和安全性方面进行了优化。
npx 是一个用于临时安装和运行软件包的工具，可以在不全局安装软件包的情况下直接运行可执行命令。
在选择使用哪个工具时，可以根据个人偏好、项目需求和团队约定来决定。无论你选择使用 npm、yarn 还是 npx，它们都可以帮助你管理 JavaScript 项目的依赖和构建过程。

Could not find any matches for com.baidu.lbs:trace:+ as no versions of com.baidu.lbs:trace are available.

查询maven仓库是否有其资源
https://developer.aliyun.com/mvn/search

<匿名com.reactlibrary.BaiduTraceModule$1>不是抽象的, 并且未覆盖OnTraceListener中aUploadCallBack(int,String,int,int)

所用资源版本过高
降低资源版本
implementation ‘com.baidu.lbs:trace:+’
改为：
implementation ‘com.baidu.lbs:trace:3.1.10’

yarn build:android > Task :aliyun-oss-react-native:verifyReleaseResources FAILED

编译版本太低

修改sdk版本：\node_modules\aliyun-oss-react-native\android\build.gradle和\node_modules\react-native-http-cache\android\build.gradle文件

清理和重新构建

cd android
./gradlew clean

compileSdkVersion buildToolsVersion 可选值在哪里看？

compileSdkVersion：你可以在 Android 开发者文档的 SDK 平台版本历史记录页面找到可用的 SDK 版本列表。该页面列出了每个 SDK 版本的 API 级别以及相关的特性和变化。你可以根据你的项目需求选择适当的 SDK 版本。以下是该页面的链接：SDK 平台版本历史记录（https://developer.android.com/studio/releases/platforms）

buildToolsVersion：你可以在 Android 开发者文档的构建工具版本历史记录页面找到可用的构建工具版本列表。该页面列出了每个构建工具版本的发布日期和相关的变化。你可以根据你的项目需求选择适当的构建工具版本。以下是该页面的链接：构建工具版本历史记录（https://developer.android.com/studio/releases/build-tools）

build.gradle 配置文件，以及里面的配置项详解

build.gradle 是用于配置 Android 项目的构建脚本文件，它使用 Groovy 或 Kotlin DSL（Domain Specific Language）语法。该文件包含了一系列的配置项，用于定义构建的行为、依赖关系、插件和其他构建设置。下面是一些常见的配置项及其详细解释：

apply plugin: ‘com.android.application’：这个配置项应用了 com.android.application 插件，它表示该项目是一个 Android 应用程序项目。

android 块：这个块用于配置项目的 Android 构建设置，包含了一系列的配置项，如 compileSdkVersion、buildToolsVersion、defaultConfig、buildTypes 等。

compileSdkVersion：指定项目编译时所使用的 Android SDK 版本，详细解释请参考之前的回答。

buildToolsVersion：指定用于编译和构建项目的构建工具版本，详细解释请参考之前的回答。

defaultConfig：默认的配置项，包括应用程序的包名、最小支持的 Android 版本、目标 Android 版本、应用程序版本号等。

buildTypes：定义了不同的构建类型（如 debug、release），可以在每个构建类型中配置不同的构建选项，例如是否启用混淆、是否启用调试模式等。

dependencies 块：这个块用于定义项目的依赖关系，包含了一系列的依赖项。

implementation：指定项目的编译时依赖，这些依赖项将被打包到最终的 APK 文件中。

testImplementation：指定项目在进行单元测试时的依赖项。

androidTestImplementation：指定项目在进行 Android 测试时的依赖项。

你可以在 dependencies 块中添加所需的库、框架或第三方模块的依赖项，以满足项目的需求。

这只是 build.gradle 文件中的一些常见配置项，实际上还有更多的配置项和灵活性可供使用。你可以根据你的项目需求和要求，自定义和配置这些选项。

希望这能帮助你理解 build.gradle 文件和其中的配置项。如果你有其他疑问，请随时提问。

react-native 执行 yarn build:android报错Execution failed for task ‘:app:transformClassesWithMultidexlistForRelease’.

包名重复，修改包名

yarn android 运行成功，但是真机上无法安装

我把apk-debug包直接发送到手机上，然后手动安装，然后再执行yarn android就成功运行并调试了

react-native项目启动时报错：Module AppRegistry is not registered callable module (calling runApplication)

参考链接

1: 结束所有node进程；（ Mac OS系统下可执行 killall -9 node）
2: npm start；
3: react-native run-ios 或者 react-native run-android；

开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

Flutter for OpenHarmony 软件开发助手App实战 - 主框架实现

开源鸿蒙跨平台开发者社区

Flutter for OpenHarmony 软件开发助手App实战 - 主题样式设计

开源鸿蒙跨平台开发者社区

Flutter框架跨平台鸿蒙开发——从0到1构建一款测算星座每日运势的APP

本文介绍了使用Flutter框架开发跨平台鸿蒙星座运势APP的全过程。该APP支持12星座每日运势查询，包含星座选择、运势展示、幸运信息等功能。文章详细讲解了核心功能实现，包括星座数据模型设计、星座卡片UI实现、网格布局以及随机运势生成算法。通过本地数据持久化和随机算法，确保用户体验流畅稳定。项目采用Flutter跨平台方案，为鸿蒙生态应用开发提供了实践参考。

开源鸿蒙跨平台开发者社区

所有评论(0)

查看更多评论

八分钟de温暖

@weixin_40466351

已为社区贡献5条内容

macOS react-native踩坑记录

八分钟de温暖

1、运行npx react-native run-android，报错 Android project not found. Are you sure this is a React Native project?

2 React Native 项目 修改代码。重新打包无效果

执行安装Homebrew /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)” 报错Mac: Failed to connect to raw.githubusercontent.com port 443: Connection refused error:

Mac os 使用brew install 安装工具时报错 fatal: not in a git directory Error: Command failed with exit 128: git

安装git

安装HomebrewCN

brew install watchman 报错Error: Cannot install in Homebrew on ARM processor in Intel default prefix (/usr/local)!

Error: spawnSync ./gradlew EACCES

error: Watchman error: std::__1::system_error: open: /Users/cqct/Documents/wchy/work/project/react-native/scf/react-native-base-scf: Operation not permitted. Make sure watchman is running for this project. See https://facebook.github.io/watchman/docs/troubleshooting.html.

再不行的话，更换watchman的版本。是watchman 版本有问题

报错:Unable to load script.Make sure you’re either running a metro server（run ‘react-native start’ ） or that your bundle ‘index.android.bundle’ is packaged correctly for release.

homebrew 安装旧版本

/bin/sh: ./gradlew: Permission denied

程序包com.facebook.react 不存在

react-native 执行 yarn android 命令时报错 error Unrecognized command “run-android”.

查看当前react-native 运行的版本

npm,yarn,npx 的区别

Could not find any matches for com.baidu.lbs:trace:+ as no versions of com.baidu.lbs:trace are available.

<匿名com.reactlibrary.BaiduTraceModule$1>不是抽象的, 并且未覆盖OnTraceListener中aUploadCallBack(int,String,int,int)

yarn build:android > Task :aliyun-oss-react-native:verifyReleaseResources FAILED

清理和重新构建

compileSdkVersion buildToolsVersion 可选值在哪里看？

build.gradle 配置文件，以及里面的配置项详解

react-native 执行 yarn build:android报错Execution failed for task ‘:app:transformClassesWithMultidexlistForRelease’.

yarn android 运行成功，但是真机上无法安装

react-native项目启动时报错：Module AppRegistry is not registered callable module (calling runApplication)

所有评论(0)

八分钟de温暖

2 React Native 项目修改代码。重新打包无效果