导入react-native-draggable-flatlist致Expo应用崩溃，求解决方案

尝试使用react-native-draggable-flatlist构建可重新排序列表，但只要导入该库（import DraggableFlatList from "react-native-draggable-flatlist";），应用就崩溃，抛出以下错误：

ERROR Error: Exception in HostFunction: expected 0 arguments, got 1, js engine: hermes
at ContextNavigator ...

同时出现路由警告：

WARN [Layout children]: No route named "garage" exists in nested children: ["contatti", "cronologia", "debugmenu", "index", "tappe", "_sitemap", "+not-found"]

注：项目使用Expo Tab路由，garage.js文件存在且原本运行正常，重新安装库无效，官方示例也无法运行。

1. 核对版本兼容性 #

react-native-draggable-flatlist的新版本可能与当前Expo SDK版本不兼容，尤其是Hermes引擎适配问题：

• 查看package.json中expo字段的SDK版本，安装对应兼容的库版本，比如针对Expo SDK 49+，可安装稳定版：

  npm install react-native-draggable-flatlist@4.0.1
  # 或
  yarn add react-native-draggable-flatlist@4.0.1
  

• 运行npx expo install react-native-gesture-handler react-native-reanimated，确保这两个依赖库与Expo SDK版本匹配（该拖拽库依赖这两个包）。

2. 正确配置Reanimated #

该库依赖react-native-reanimated，必须完成以下配置：

• 修改babel.config.js，添加Reanimated插件：

  module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
      plugins: ['react-native-reanimated/plugin'],
    };
  };
  

• 重启Metro服务器并清除缓存：

  npx expo start --clear
  

3. 排查路由冲突 #

虽然garage路由原本正常，但库导入后可能触发导航上下文冲突：

• 检查app.json/app.config.js中的路由配置，确认garage路由已正确注册到Tab导航的子路由列表中；
• 在全新的最小Expo项目中测试该库的官方示例，排除项目本身的路由或其他依赖冲突。

4. 临时降级JS引擎 #

若Hermes引擎问题无法快速解决，可临时切换到JSC：

• 修改app.json配置：

  {
    "expo": {
      "jsEngine": "jsc"
    }
  }
  

• 重启项目测试。

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