React Native KeyboardAvoidingView异常：输入框被遮挡且设置属性出现白块

方案1：动态给ScrollView加底部内边距 #

通过监听键盘状态，给ScrollView添加包含额外20px的底部内边距，既解决遮挡，又不会出现多余白色块：

import { FunctionComponent, ReactNode, useState, useEffect } from 'react';
import { KeyboardAvoidingView, ScrollView, Keyboard } from 'react-native';

interface WrapperProps {
  children: ReactNode;
}

const KeyboardAvoidingWrapper: FunctionComponent<WrapperProps> = ({children}) => {
  const [scrollBottomPadding, setScrollBottomPadding] = useState(0);
  const extraOffset = 20; // 你需要的额外向下偏移量

  useEffect(() => {
    // 监听键盘弹出
    const showListener = Keyboard.addListener('keyboardDidShow', (e) => {
      setScrollBottomPadding(e.endCoordinates.height + extraOffset);
    });
    // 监听键盘收起
    const hideListener = Keyboard.addListener('keyboardDidHide', () => {
      setScrollBottomPadding(0);
    });

    // 组件卸载时移除监听
    return () => {
      showListener.remove();
      hideListener.remove();
    };
  }, []);

  return (
    <KeyboardAvoidingView behavior="height" style={{flex: 1}}>
      <ScrollView 
        contentContainerStyle={{paddingBottom: scrollBottomPadding}}
      >
        {children}
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

方案2：用ScrollView的contentInset实现透明偏移 #

直接给ScrollView设置底部插入量，配合KeyboardAvoidingView的基础布局，同样能实现额外滚动空间：

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

interface WrapperProps {
  children: ReactNode;
}

const KeyboardAvoidingWrapper: FunctionComponent<WrapperProps> = ({children}) => {
  const extraOffset = 20;

  return (
    <KeyboardAvoidingView 
      behavior="height" 
      style={{flex: 1}}
      keyboardVerticalOffset={0} // 可根据你的导航栏高度调整基础偏移
    >
      <ScrollView
        contentContainerStyle={{flexGrow: 1}}
        contentInset={{bottom: extraOffset}}
        scrollIndicatorInsets={{bottom: extraOffset}}
      >
        {children}
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

必看注意事项 #

• 一定要给KeyboardAvoidingView加style={{flex: 1}}，否则容易出现底部白色空白块
• iOS平台可以试试把behavior改成"padding"，部分场景适配效果更好
• 不要同时混用keyboardVerticalOffset和自定义内边距，会导致偏移叠加混乱

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