切换抽屉时触发TypeError: Cannot read properties of undefined (reading 'PropsAllowlists')求永久解决

问题说明 #

切换React Navigation抽屉组件时触发以下错误：

TypeError: Cannot read properties of undefined (reading 'PropsAllowlists')

当前使用的依赖版本：

"@react-navigation/drawer": "^6.6.6",
"@react-navigation/native": "^6.1.9",
"@react-navigation/native-stack": "^6.9.12",
"react-native-reanimated": "^3.6.1",

错误出现后虽可通过最小化应用临时恢复操作，但需彻底解决该问题。

有效修复方案 #

1. 降级react-native-reanimated到兼容版本 #

该错误核心原因是Reanimated 3.6.x与React Navigation Drawer 6.6.6存在兼容性冲突，降级到3.5.x系列稳定版本即可解决：

# 卸载当前版本
npm uninstall react-native-reanimated
# 安装兼容版本（以3.5.4为例）
npm install react-native-reanimated@3.5.4

# yarn用户执行以下命令：
yarn remove react-native-reanimated
yarn add react-native-reanimated@3.5.4

完成后重新构建项目：

# iOS
cd ios && pod install && cd ..
# Android
./gradlew clean

2. 升级@react-navigation/drawer到修复版本 #

React Navigation团队在后续版本中修复了该问题，升级到6.6.7及以上版本即可：

npm install @react-navigation/drawer@^6.6.7
# yarn用户执行：
yarn add @react-navigation/drawer@^6.6.7

注意：升级后建议同步检查其他导航依赖版本是否匹配，避免引发新的兼容性问题。

3. 清除全量缓存后重新构建 #

若上述方案无效，尝试清除所有缓存后重新构建项目：

# 清除npm/yarn缓存
npm cache clean --force
# yarn用户执行：yarn cache clean

# 清除Metro缓存
npx react-native start --reset-cache

# 重新构建iOS项目
cd ios && pod deintegrate && pod install && cd .. && npx react-native run-ios

# 重新构建Android项目
./gradlew clean && npx react-native run-android

错误截图 #

• 主错误界面：
• iOS端附加错误：

内容的提问来源于stack exchange，提问作者Ramanjeet