iOS端聚焦TextInput时键盘遮挡BottomSheetModal问题排查

问题描述 #

iOS设备上聚焦TextInput输入框时，键盘会遮挡BottomSheetModal弹窗，导致无法查看弹窗内容；Android设备无此问题。

原代码片段 #

<BottomSheetModal
  ref={ref}         
  index={1}
  snapPoints={snapPoints}
  handleIndicatorStyle={[s.handleStyle, s.handleColorWhite]}
  backdropComponent={BottomSheetBackdrop}
>
  <KeyboardAwareScrollView keyboardShouldPersistTaps='handled' contentContainerStyle={{flexGrow: 1}}>
    <View style={s.centered}>
      <Text style={s.title}>Rabatt-Code</Text>
      <Text style={s.subtitle}>Füge ein Rabatt-Code für dein Produkt ein</Text>
      <Text style={s.stepText}>{`Schritt ${step}/3`}</Text>
    </View>

    <Text style={[s.text, s.bold]}>Nur Buchstaben & Zahlen!</Text>
    <View style={s.content}>
      <View style={s.inputContainer}>
        <Input
          placeholder='Name (exp. Max50)'
          value={coupon.name}
          onChangeText={handleChangeName}
          style={[InputStyles.full_icon]}
          icon={<Ionicons name="md-newspaper-outline" size={24} style={s.icon} color="#333" />}
        />
      </View>
      <View style={s.containerInner}>
        <Pressable onPress={handleChangeStage} style={[ButtonStyles.full]}>
          <Text style={s.btnText}>NEXT</Text>
        </Pressable>
      </View>
    </View>
  </KeyboardAwareScrollView>
</BottomSheetModal>

解决方案 #

1. 优化KeyboardAwareScrollView配置 #

iOS需要明确配置滚动视图的键盘适配行为，修改KeyboardAwareScrollView属性：

<KeyboardAwareScrollView
  keyboardShouldPersistTaps='handled'
  contentContainerStyle={{flexGrow: 1}}
  enableOnAndroid={false} // Android无需额外处理
  keyboardVerticalOffset={80} // 根据弹窗实际高度调整偏移量
  behavior="padding"
>

behavior="padding"会让滚动视图自动根据键盘高度调整内边距，keyboardVerticalOffset用于微调偏移，适配BottomSheet的顶部间距。

2. 动态调整BottomSheet的snapPoints #

通过监听键盘高度变化，动态修改弹窗的停靠点，确保弹窗不被键盘遮挡：

import { Keyboard } from 'react-native';
import { useState, useEffect } from 'react';

// 组件内部添加状态与监听
const [keyboardHeight, setKeyboardHeight] = useState(0);

useEffect(() => {
  const showListener = Keyboard.addListener('keyboardDidShow', (e) => {
    setKeyboardHeight(e.endCoordinates.height);
  });
  const hideListener = Keyboard.addListener('keyboardDidHide', () => {
    setKeyboardHeight(0);
  });

  return () => {
    showListener.remove();
    hideListener.remove();
  };
}, []);

// 计算动态停靠点
const dynamicSnapPoints = snapPoints.map(point => 
  keyboardHeight > 0 ? point - keyboardHeight : point
);

将BottomSheetModal的snapPoints替换为dynamicSnapPoints：

<BottomSheetModal
  ref={ref}         
  index={1}
  snapPoints={dynamicSnapPoints}
  handleIndicatorStyle={[s.handleStyle, s.handleColorWhite]}
  backdropComponent={BottomSheetBackdrop}
>

3. 检查容器样式 #

确保inputContainer、content等外层容器没有设置固定高度，避免限制KeyboardAwareScrollView的滚动范围，让内容能随键盘弹出自动上移。

原理说明 #

iOS与Android的键盘弹出机制不同：Android默认会自动调整窗口布局，而iOS需要开发者主动处理键盘高度对视图的影响。通过上述两种方式，要么让滚动视图适配键盘，要么让弹窗本身根据键盘高度调整位置，就能解决遮挡问题。

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