React Native Drawer报_updatePropsPaper变量未找到报错如何修复

问题表现 #

• 触发条件：仅在使用Drawer抽屉导航切换页面时触发
• 异常表现：弹出Can't find variable: _updatePropsPaper报错提示，但页面可正常跳转至目标页，关闭报错弹窗后Drawer导航功能可正常使用

问题根因 #

该问题不是@react-navigation/drawer版本升级适配遗漏导致，核心诱因是项目依赖的react-native-reanimated版本不兼容：
当前项目使用的是react-native-reanimated@3.0.0-rc.0预览测试版，该版本存在内部API引用缺陷，_updatePropsPaper是Reanimated库内部负责属性更新的内置方法，rc版本的打包逻辑存在问题导致运行时无法识别该方法，同时该版本也不在Expo SDK 45的官方兼容依赖列表内，和当前项目使用的React Navigation 6.x系列抽屉导航存在适配冲突。

附当前项目依赖参考 #

{
  "dependencies": {
    "@react-native-masked-view/masked-view": "0.2.6",
    "@react-native-picker/picker": "2.4.0",
    "@react-navigation/drawer": "^6.4.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.1",
    "expo": "^45.0.4",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-country-picker-modal": "^2.0.0",
    "react-native-gesture-handler": "^2.4.2",
    "react-native-reanimated": "^3.0.0-rc.0",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-tab-view": "^3.1.1",
    "react-native-web": "0.17.7",
    "world-countries": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  }
}

修复步骤 #

1. 卸载存在问题的Reanimated预览版，安装Expo 45兼容的稳定版本：
   npm用户执行：

   npm uninstall react-native-reanimated
   npm install react-native-reanimated@~2.8.0
   

   yarn用户执行：

   yarn remove react-native-reanimated
   yarn add react-native-reanimated@~2.8.0
   

2. 检查项目根目录的babel.config.js配置，确保Reanimated插件已正确添加，且该插件必须放在plugins数组的最后一项：

   module.exports = {
     presets: ['babel-preset-expo'],
     plugins: ['react-native-reanimated/plugin'],
   };
   

3. 清除项目缓存后重启服务：

   expo start -c
   

验证标准 #

修复完成后，触发Drawer切换、抽屉开合手势操作时，不会再弹出该报错，所有导航交互功能正常。

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