Gorhom Bottom Sheet 可滚动内容失效及布局异常问题求助

兄弟我之前在 React Native 0.74 + Gorhom Bottom Sheet v5 的组合下，碰到过一模一样的问题！布局乱飘、滚动失效、键盘弹起后内容顶出屏幕这些坑我都踩过，给你几个亲测有效的解决方案，一步步来：

1. 用官方封装的滚动组件解决手势冲突 #

别用 React Native 原生的ScrollView！Gorhom 的 Bottom Sheet 自带手势处理，原生 ScrollView 会和它的拖拽手势冲突，直接导致滚动失效。换用库提供的BottomSheetScrollView，它已经做了完美的手势兼容：

import { BottomSheet, BottomSheetScrollView } from '@gorhom/bottom-sheet';

// 组件内部示例
<BottomSheet
  index={0}
  snapPoints={['40%', '80%']}
>
  <BottomSheetScrollView
    contentContainerStyle={{
      padding: 16,
      minHeight: '100%', // 避免内容过短时布局塌陷
    }}
  >
    {/* 你的输入框和长内容 */}
    <TextInput 
      placeholder="请输入内容" 
      style={{padding: 12, borderWidth: 1, marginBottom: 20}}
    />
    {/* 模拟长列表 */}
    {Array.from({length: 25}).map((_, idx) => (
      <Text key={idx} style={{padding: 15, borderBottomWidth: 1}}>
        列表项 {idx + 1}
      </Text>
    ))}
  </BottomSheetScrollView>
</BottomSheet>

2. 配置键盘适配，避免布局顶出屏幕 #

键盘弹起时的布局错乱，核心是没做好 Bottom Sheet 和键盘的联动，结合两个配置就能解决：

• Gorhom 内部配置：给BottomSheet加上keyboardBehavior="extend"，让 Bottom Sheet 自动跟着键盘高度调整位置；
• 系统级适配：
  • iOS 用KeyboardAvoidingView配合behavior="padding"；
  • Android 要在AndroidManifest.xml里把对应 Activity 的windowSoftInputMode改成adjustResize，不然键盘适配根本不生效。

示例代码：

import { KeyboardAvoidingView, Platform, SafeAreaView } from 'react-native';

// 外层包裹SafeAreaView和KeyboardAvoidingView
<SafeAreaView style={{flex: 1}}>
  <KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    style={{flex: 1}}
  >
    <BottomSheet
      index={0}
      snapPoints={['40%', '80%']}
      keyboardBehavior="extend" // 关键配置：让BottomSheet随键盘升高
    >
      {/* 里面的BottomSheetScrollView内容 */}
    </BottomSheet>
  </KeyboardAvoidingView>
</SafeAreaView>

3. 合理设置 snapPoints，避免内容超出屏幕 #

如果你的 Bottom Sheet 最大高度设得太高，键盘弹起后很容易顶出屏幕顶部。建议用屏幕高度的百分比或动态计算的方式设置 snapPoints：

import { useWindowDimensions } from 'react-native';

const { height: screenHeight } = useWindowDimensions();
// 最大高度设为屏幕的70%，留出顶部状态栏和键盘的空间
const snapPoints = [`${screenHeight * 0.4}px`, `${screenHeight * 0.7}px`];

// 然后把snapPoints传给BottomSheet组件

最后再提个小细节 #

如果你的输入框在滚动内容的顶部，建议给BottomSheetScrollView加上keyboardDismissMode="interactive"，这样滚动时可以收起键盘，体验会更流畅。

先试试第一个方案替换滚动组件，这是最常见的滚动失效原因，再配合键盘适配的配置，应该就能解决你碰到的所有问题了！

内容来源于stack exchange