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




