方案一:
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时,在视图底部填充等高空白视图。