Expo react-native-web中KeyboardAvoidingView是否可用？如何解决TextInput被软键盘遮挡问题

基础结论 #

KeyboardAvoidingView对react-native-web的支持并不完整。Web环境没有原生端的键盘状态回调API，无法实时获取键盘高度，原生组件的适配逻辑在Web端大部分场景下失效，你遇到的「仅输入字符后输入框才上移」的问题，本质是输入操作触发了页面重排，浏览器被动滚动到输入框，聚焦时组件没有主动触发偏移逻辑。

你嵌套在导航中的页面失效的核心原因是：你将KeyboardAvoidingView放在了ScrollView内部，且没有做Web端的差异化配置，加上react-native-navigation的页面容器默认会限制滚动范围，进一步阻断了默认适配逻辑。

可落地的解决方案 #

方案1：调整现有组件结构（改动最小） #

优先调整你的页面代码结构，适配Web端的特性：

• 将KeyboardAvoidingView移到ScrollView外层，不要放在ScrollView内部
• 用平台判断指定behavior属性，Web端用height比padding兼容性更好：behavior={Platform.OS === 'web' ? 'height' : 'padding'}
• 给ScrollView添加keyboardShouldPersistTaps='handled'属性，避免点击输入框时滚动异常
• 确认页面根容器设置了flex: 1，没有固定高度限制，保证页面可正常滚动

调整后的你的测试页面代码参考：

<KeyboardAvoidingView 
  behavior={Platform.OS === 'web' ? 'height' : 'padding'}
  style={{flex: 1}}
>
  <ScrollView 
    style={{ flexGrow: 1 }}
    keyboardShouldPersistTaps='handled'
  >
    <View style={{ height: 500, width: '100%' }}></View>
    <View style={{ height: 100, backgroundColor: 'blue', width: '100%' }}>
      <TextInput 
        {/* 原有属性不变 */}
      />
    </View>
  </ScrollView>
</KeyboardAvoidingView>

方案2：自定义Web端键盘适配逻辑（兼容性最好） #

如果调整结构后仍有问题，直接自己实现适配逻辑，比依赖原生组件更稳定：

1. 封装自定义TextInput组件，统一绑定聚焦滚动逻辑：

import { TextInput, Platform } from 'react-native';
import { useRef } from 'react';

const CustomTextInput = (props) => {
  const inputRef = useRef<TextInput>(null);

  const handleFocus = () => {
    props.onFocus?.();
    if (Platform.OS !== 'web' || !inputRef.current) return;
    // 调用Web原生API自动滚动输入框到可见区域
    (inputRef.current as unknown as HTMLElement).scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    });
  };

  return <TextInput ref={inputRef} onFocus={handleFocus} {...props} />;
};

export default CustomTextInput;

2. 替换项目中所有的TextInput为这个自定义组件，即可全局生效，不需要每个页面单独适配。
3. 确认index.html的head标签中已添加正确的视口配置：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

你之前尝试的纯H5适配方案失效的原因是：react-native-web的页面默认根容器用flex占满全屏，滚动逻辑在容器内部，不会触发body的滚动，所以修改body相关属性的方案不会生效。

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