React Native应用中@gorhom/bottom-sheet组件无法显示问题

问题说明 #

在React Native 0.76.5项目中集成@gorhom/bottom-sheet@5.0.6时，BottomSheet组件无法在屏幕上显示，相关代码及环境配置如下：

FilterBottomSheet.js #

import BottomSheet, {BottomSheetView} from '@gorhom/bottom-sheet';
import {forwardRef, useMemo} from 'react';
import {Text} from 'react-native';

const FilterBottomSheet = forwardRef(({}, ref) => {
  const snapPoints = useMemo(() => ['25%', '50%'], []);

  return (
    <BottomSheet ref={ref} index={1} snapPoints={snapPoints}>
      <BottomSheetView style={{flex: 1}}>
        <Text>Awesome</Text>
      </BottomSheetView>
    </BottomSheet>
  );
});

export default FilterBottomSheet;

App.js #

import {GestureHandlerRootView} from 'react-native-gesture-handler';
import RootNavigator from './src/navigations/RootNavigator';

function App() {
  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <RootNavigator />
    </GestureHandlerRootView>
  );
}

export default App;

babel.config.js #

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

环境依赖 #

• "react-native": "0.76.5"
• "@gorhom/bottom-sheet": "^5.0.6"
• "react-native-gesture-handler": "^2.22.0"
• "react-native-reanimated": "^3.17.0-rc.1"

排查与解决步骤 #

1. 确认组件已被正确渲染
   检查RootNavigator对应的屏幕组件中，是否已引入并渲染FilterBottomSheet，同时通过ref控制其显示。示例用法：

import FilterBottomSheet from './FilterBottomSheet';
import {useRef} from 'react';
import {Button} from 'react-native';

function TargetScreen() {
  const bottomSheetRef = useRef(null);

  return (
    <>
      <Button title="打开底部弹窗" onPress={() => bottomSheetRef.current?.expand()} />
      <FilterBottomSheet ref={bottomSheetRef} />
    </>
  );
}

2. 修正Reanimated插件配置
   确保react-native-reanimated/plugin在babel插件列表的最后一位，顺序错误会导致动画失效：

module.exports = {
  presets: ['@react-native/babel-preset'],
  plugins: [
    // 其他插件需放在此插件之前
    'react-native-reanimated/plugin'
  ],
};

之后执行npx pod-install（iOS）或重新编译Android项目，再通过npm start -- --reset-cache重启Metro并清除缓存。

3. 调整BottomSheet基础属性

• 将snapPoints改为数值类型（如[200, 400]），部分环境下百分比单位可能存在兼容性问题；
• 给BottomSheet添加背景色，排查是否因透明背景导致组件不可见：

  <BottomSheet ref={ref} index={1} snapPoints={snapPoints} style={{backgroundColor: '#fff'}}>
    {/* 内部内容 */}
  </BottomSheet>
  

4. 降级Reanimated至稳定版
   使用的react-native-reanimated@3.17.0-rc.1为候选版本，可能存在兼容性问题，建议降级到稳定版：

npm install react-native-reanimated@3.16.1

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