React Native键盘的两种适配方案

阿大大大大

已于 2024-08-27 16:22:54 修改

阅读量104

点赞数 1

分类专栏： react native 文章标签： react native react.js javascript

于 2024-08-27 16:06:38 首次发布

本文链接：https://blog.csdn.net/weixin_39237314/article/details/141605224

版权

react native 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

方案一：

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时，在视图底部填充等高空白视图。