React Native Modal键盘适配问题：iOS遮挡/Android整体上推的解决需求

针对你遇到的Android端Modal整体上推、iOS端键盘遮挡内容的问题，通过以下配置可以实现仅让Modal内部内容响应键盘，同时支持滚动查看键盘后方内容：

核心修改方案 #

结合KeyboardAvoidingView和ScrollView，配合Modal的属性调整，分别处理两端的键盘适配逻辑：

修改后的完整代码 #

import { Platform, KeyboardAvoidingView, ScrollView, TextInput, View, Text } from 'react-native';
import Modal from 'react-native-modal';

// 你的组件内
<Modal
  isVisible={true}
  style={{
    justifyContent: 'flex-end',
    margin: 0,
  }}
  backdropOpacity={0.5}
  animationIn="slideInUp"
  animationOut="slideOutDown"
  // Android端禁用Modal整体上推，交给内部组件处理
  avoidKeyboard={Platform.OS === 'android' ? false : true}
>
  <KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    style={{ flex: 1 }}
    // iOS端可根据实际布局调整偏移量，避免内容被顶部或底部遮挡
    keyboardVerticalOffset={Platform.OS === 'ios' ? 20 : 0}
  >
    <ScrollView
      style={{ height: 500, gap: 16, backgroundColor: 'white' }}
      contentContainerStyle={{ flexGrow: 1 }}
    >
      <TextInput style={{ borderWidth: 1, padding: 10 }} placeholder="输入内容" />
      <View style={{ flex: 1, backgroundColor: 'red', marginVertical: 8 }} />
      <View style={{ flex: 1, backgroundColor: 'red', marginVertical: 8 }} />
      <Text style={{ padding: 8 }}>aasasas</Text>
      {/* 可添加更多内容测试滚动效果 */}
      <View style={{ height: 200, backgroundColor: 'blue', marginVertical: 8 }} />
      <Text style={{ padding: 8 }}>更多测试内容</Text>
    </ScrollView>
  </KeyboardAvoidingView>
</Modal>

关键配置说明 #

• Modal的avoidKeyboard：Android端设为false，阻止Modal容器被键盘整体上推，仅让内部内容响应键盘变化；iOS端保持默认或按需调整。
• KeyboardAvoidingView：根据平台选择不同behavior：
  • iOS用padding：通过添加内边距让内容上移
  • Android用height：通过调整容器高度适配键盘
  • keyboardVerticalOffset用于微调iOS端的偏移量，适配不同布局下的遮挡问题
• ScrollView：包裹所有内容，contentContainerStyle={{ flexGrow: 1 }}确保内容占满容器空间，键盘弹出时自动调整可滚动区域，让用户能滚动查看键盘后方的内容。

额外注意事项 #

• 若使用React Native官方Modal（非第三方库），需在AndroidManifest.xml中设置android:windowSoftInputMode="adjustResize"，确保Android端能正确响应键盘高度变化。
• 测试时可根据实际布局调整keyboardVerticalOffset的数值，优化适配效果。

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