You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Expo React项目中@gorhom/bottom-sheet兼容性问题求助

Expo React项目中@gorhom/bottom-sheet兼容性问题求助

我完全理解你现在的困扰——明明跟着官方文档配置了@gorhom/bottom-sheet,结果一运行就抛出getDevServer is not a function的错误,而且还是Hermes引擎下的运行时问题,大概率是依赖版本不兼容或者多余依赖冲突导致的。我帮你梳理了完整的排查和解决步骤,你可以按顺序试试:


你的问题重现

创建了Expo项目并引入@gorhom/bottom-sheet@^5.1.6后无法运行,报错信息:

[runtime not ready]: TypeError: getDevServer is not a fucntion (it is undefined), js engine: hermes

已按照官方文档配置,怀疑依赖存在兼容性问题,附上项目的package.json

{
  "name": "trucks_main",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@gorhom/bottom-sheet": "^5.1.6",
    "@react-native-community/cli": "^18.0.0",
    "axios": "^1.9.0",
    "eas": "^0.1.0",
    "expo": "^53.0.15",
    "expo-checkbox": "~4.1.4",
    "expo-constants": "~17.1.5",
    "expo-dev-client": "~5.2.2",
    "expo-image": "~2.3.2",
    "expo-linking": "~7.1.6",
    "expo-location": "~18.1.6",
    "expo-router": "~5.1.2",
    "expo-secure-store": "~14.2.3",
    "expo-splash-screen": "~0.30.9",
    "expo-sqlite": "~15.2.13",
    "expo-status-bar": "~2.2.3",
    "react": "19.0.0",
    "react-native": "^0.78.0",
    "react-native-gesture-handler": "^2.26.0",
    "react-native-maps": "1.24.3",
    "react-native-reanimated": "~3.17.4",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "~4.11.1",
    "react-native-toast-message": "^2.3.0",
    "react-native-vector-icons": "^10.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@eslint/js": "^9.30.0",
    "@types/react": "~19.0.10",
    "@typescript-eslint/eslint-plugin": "^8.35.0",
    "@typescript-eslint/parser": "^8.35.0",
    "eslint": "^9.30.0",
    "json-server": "^1.0.0-beta.3",
    "json-server-auth": "^2.1.0",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.35.0"
  },
  "private": true,
  "expo": {
    "doctor": {
      "reactNativeDirectoryCheck": {
        "listUnknownPackages": false
      }
    }
  }
}

排查与解决步骤

1. 移除冲突/不必要的依赖

你的项目里有两个明显会引发冲突的依赖:

  • @react-native-community/cli:Expo已经内置了适配的CLI工具,单独安装这个第三方CLI会和Expo的内置工具版本冲突
  • eas:这是旧版的EAS CLI包,现在官方推荐使用@expo/eas-cli,且不需要放在项目依赖中(直接通过npx调用即可)

执行以下命令移除它们:

npm uninstall @react-native-community/cli eas

2. 降级react-native-safe-area-context到兼容版本

这是最可能导致你报错的核心原因:你当前用的react-native-safe-area-context@5.4.0只支持React Native 0.79+,但Expo 53对应的React Native版本是0.78.0,版本完全不兼容。

执行命令降级到Expo 53适配的稳定版本:

npm install react-native-safe-area-context@~4.12.0

3. 确保react-native-reanimated的Babel配置正确

@gorhom/bottom-sheet重度依赖react-native-reanimated,必须在Babel配置中添加它的插件,且插件要放在最前面。

打开你的babel.config.js,确保配置如下:

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

4. 彻底清除缓存并重新构建

Expo的缓存经常会保留旧的依赖状态,掩盖真实的兼容问题。执行以下命令彻底清缓存后重启项目:

# 清除缓存并启动开发服务器
npx expo start -c

# 如果是安卓项目,也可以重新构建原生代码
npx expo run:android -c

5. (可选)升级@gorhom/bottom-sheet到最新兼容版

如果以上步骤都无效,可以尝试升级到@gorhom/bottom-sheet的最新v5稳定版,确保它完全适配Expo 53的环境:

npm install @gorhom/bottom-sheet@latest

额外提醒

  • @gorhom/bottom-sheet依赖原生模块,不能在Expo Go中直接运行,必须使用expo run:android/expo run:ios启动开发客户端
  • 可以运行npx expo doctor命令,它会自动检测所有依赖的兼容性问题,并给出具体的修复建议

内容来源于stack exchange

火山引擎 最新活动