React Native：BottomSheet遇键盘弹出变形，如何让键盘置于其上或实现滚动？

方案1：让键盘覆盖BottomSheet（避免布局挤压） #

Android配置修改 #

打开android/app/src/main/AndroidManifest.xml，找到对应Activity，设置windowSoftInputMode为adjustPan或adjustNothing：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustPan">

• adjustPan：键盘弹出时移动页面，BottomSheet作为悬浮层不会被挤压
• adjustNothing：布局完全不调整，键盘直接覆盖内容

组件属性适配 #

若使用@gorhom/bottom-sheet，可添加enablePanDownToClose={false}防止拖拽冲突，同时保持BottomSheet高度为屏幕百分比（如你代码里的height: "80%"），避免被键盘强制拉伸。

方案2：让BottomSheet内容支持滚动 #

将BottomSheet内部内容包裹在ScrollView中，键盘弹出时可滚动查看被遮挡区域，配合KeyboardAvoidingView适配iOS：

修改你的代码结构：

<BottomSheet
  visible={isOpen}
  onBackButtonPress={() => {
    setToUpdate(undefined)
    setIsOpen(false);
  }}
>
  <View style={[buttomSheetStyles.bottomNavigationView, { height: "80%", backgroundColor: Colors.white500 }]}>
    <ScrollView style={{ flex: 1 }}>
      <View style={[buttomSheetStyles.buttomSheetContainer, { alignItems: 'center', justifyContent: 'space-around' }]}>
        {/* 原有的图片、标题、Formik表单等内容 */}
      </View>
    </ScrollView>
  </View>
</BottomSheet>

iOS端建议外层加KeyboardAvoidingView：

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

// ...

<BottomSheet ...>
  <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
    <ScrollView style={{ flex: 1 }}>
      {/* 内容 */}
    </ScrollView>
  </KeyboardAvoidingView>
</BottomSheet>

方案3：最优适配方案（结合自动调整与滚动） #

如果使用@gorhom/bottom-sheet，直接利用库的键盘适配属性，同时保留滚动：

<BottomSheet
  visible={isOpen}
  onBackButtonPress={() => {
    setToUpdate(undefined)
    setIsOpen(false);
  }}
  keyboardBehavior="extend" // 自动适配键盘高度
>
  <ScrollView style={{ flex: 1 }}>
    {/* 内部内容 */}
  </ScrollView>
</BottomSheet>

这个属性会让BottomSheet在键盘弹出时自动调整高度，避免变形，同时内容可滚动，兼顾体验与布局稳定性。

注意事项 #

• 避免给BottomSheet内部View同时设置flex比例和固定高度，防止布局冲突
• 确保Input组件的keyboardType设置正确，避免异常键盘类型导致的布局问题
• 若使用其他BottomSheet库，查阅官方文档是否有专属的键盘适配配置

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