React Native如何根据键盘开闭状态自动适配<View>的显示区域

下面提供两种可直接落地的实现方式，可根据项目场景选择： #

方案1：正确配置KeyboardAvoidingView实现 #

之前使用该组件未生效，大概率是属性配置和父容器样式设置错误，按如下步骤调整即可：

• 安卓端先修改android/app/src/main/AndroidManifest.xml，把activity节点的android:windowSoftInputMode属性设置为adjustResize
• 组件代码按如下结构编写，不同平台适配不同的behavior属性：

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

export default function App() {
  return (
    <KeyboardAvoidingView
      style={{flex: 1}}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <View style={{flex: 1}}>
        {/* 原有业务代码 */}
      </View>
    </KeyboardAvoidingView>
  )
}

注意：外层所有父级容器必须设置flex:1才能保证正常占满全屏

方案2：监听键盘事件手动控制容器高度（兼容性更好） #

如果KeyboardAvoidingView存在特殊场景的兼容问题，可以手动监听键盘事件动态计算可用高度，可控性更高：

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

const { height: screenHeight } = Dimensions.get('window');

export default function App() {
  const [containerHeight, setContainerHeight] = useState(screenHeight);

  useEffect(() => {
    // 监听键盘弹出事件
    const showListener = Keyboard.addListener('keyboardDidShow', (e) => {
      setContainerHeight(screenHeight - e.endCoordinates.height);
    });
    // 监听键盘收起事件
    const hideListener = Keyboard.addListener('keyboardDidHide', () => {
      setContainerHeight(screenHeight);
    });

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

  return (
    <View style={{height: containerHeight}}>
      {/* 原有业务代码 */}
    </View>
  );
}

iOS端如果存在刘海屏安全区域适配问题，可以配合react-native-safe-area-context库的useSafeAreaInsets方法调整高度计算逻辑，排除安全区域的占位高度

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