React Native键盘的两种适配方案

方案一：

import {KeyboardAvoidingView} from 'react-native';
import {useHeaderHeight} from '@react-navigation/elements';const headerHeight = useHeaderHeight();<KeyboardAvoidingViewbehavior={'padding'}keyboardVerticalOffset={headerHeight}style={styles.container}> 
{children}
</KeyboardAvoidingView>

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

方案二：

import {SafeAreaView} from 'react-native-safe-area-context';<SafeAreaViewmode="padding"edges={{top: 'off', bottom: 'additive'}}style={{backgroundColor: white}}>
{children}</SafeAreaView>

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

off：关闭安全区适配

additive：增加安全区适配

总结：

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

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