React Native键盘的两种适配方案

方案一：

import {KeyboardAvoidingView} from 'react-native';
import {useHeaderHeight} from '@react-navigation/elements';

const headerHeight = useHeaderHeight();

<KeyboardAvoidingView
        behavior={'padding'}
        keyboardVerticalOffset={headerHeight}
        style={styles.container}> 
{children}
</KeyboardAvoidingView>

headerHeight为导航栏高度，导航栏依赖：@react-navigation/native

方案二：

import {SafeAreaView} from 'react-native-safe-area-context';

<SafeAreaView
      mode="padding"
      edges={{top: 'off', bottom: 'additive'}}
      style={{backgroundColor: white}}>
{children}

</SafeAreaView>

前置依赖：react-native-safe-area-context

off：关闭安全区适配

additive：增加安全区适配

总结：

方案一：采用的是避让逻辑，通过KeyboardAvoidingView组件将视图上移；

方案二：采用的是占位逻辑，通过获取Keyboard高度，在显示Keyboard时，在视图底部填充等高空白视图。