React Native项目iOS系统键盘弹出遮挡文本框问题咨询

排查步骤 #

• 首先确认原生端配置差异：Android系统默认支持windowSoftInputMode属性，配置为adjustResize时会自动压矮应用窗口避让键盘，而iOS系统没有类似的系统级配置，默认不会调整页面布局，优先检查是否只做了Android端的适配逻辑，未兼容iOS场景。
• 检查文本框所在容器类型：如果文本框放在无滚动能力的普通View容器内，键盘弹出后页面没有上移空间，Android端因为系统自动调整窗口高度所以内容会自动上移，iOS端就会出现遮挡问题。
• 检查键盘避让组件的配置差异：如果使用了KeyboardAvoidingView这类跨端适配组件，确认是否针对iOS单独配置了behavior属性，该属性Android端无需配置即可生效，iOS端必须指定为padding或position才能正常工作。

解决方案 #

方案1：使用官方KeyboardAvoidingView组件 #

轻量场景优先使用官方自带组件，仅需针对iOS单独配置参数即可：

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

const InputPage = () => {
  return (
    <KeyboardAvoidingView 
      style={{flex: 1}}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      // 可根据页面导航栏高度自定义偏移量
      keyboardVerticalOffset={Platform.OS === 'ios' ? 64 : 0}
    >
      <ScrollView contentContainerStyle={{flexGrow: 1}}>
        {/* 页面内容，包含所有文本框组件 */}
      </ScrollView>
    </KeyboardAvoidingView>
  )
}

注意：组件的父容器必须设置flex:1属性，否则避让逻辑不会生效。如果页面有自定义导航栏，需要将keyboardVerticalOffset的值调整为自定义导航栏的实际高度。

方案2：监听键盘事件手动调整布局 #

复杂页面场景下如果官方组件无法满足需求，可以手动监听键盘的弹出收起事件，动态调整页面容器的边距：

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

const InputPage = () => {
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  useEffect(() => {
    // iOS用keyboardWillShow事件响应更及时，Android用keyboardDidShow即可
    const showListener = Keyboard.addListener(
      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
      (e) => setKeyboardHeight(e.endCoordinates.height)
    );
    const hideListener = Keyboard.addListener(
      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
      () => setKeyboardHeight(0)
    );

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

  return (
    <View style={{flex: 1, paddingBottom: keyboardHeight}}>
      {/* 页面内容，可给文本框额外加底部边距保证和键盘的间距 */}
      <TextInput style={{marginBottom: keyboardHeight > 0 ? 16 : 0}} />
    </View>
  )
}

方案3：Modal弹窗内输入框适配 #

如果文本框放在全屏Modal组件内，官方避让组件可能失效，此时将Modal的根容器替换为KeyboardAvoidingView即可，不要同时配置多个键盘避让逻辑，避免出现布局跳动。

内容的提问来源于stack exchange，提问作者D.Sarkar