react native 底部输入框固定 键盘弹起不遮挡输入框 输入完毕隐藏键盘

首先将输入框固定在底部 :

我用到的是一个大的View 设置flex:1

里面上面部分用的ScrollView

下面输入框也用的一个View (flexDirection:'row',height:固定高度,width:'100%')

在输入框View里 我设置了button的width,然后输入框 flexGrow:1


此时点击输入框 键盘一弹出就会遮挡底部组件

这时就要用到1个组件:KeyboardAvoidingView

keyboardVerticalOffset:修正距离 (不设置的话 键盘弹出输入框刚好和键盘顶部重合)

behavior:指定如何对键盘的存在作出反应。'height', 'position', 'padding'(官方文档:如果设定 behavior 值为'position',则会生成一个 View 作为内容容器。此属性用于指定此内容容器的样式。)

enabled:是否启用KeyboardAvoidingView

上诉设置了之后,输入框就会随键盘的弹出出现在键盘的顶部,但是我们输入完了,还要隐藏键盘。

就要用到rn的Keyboarddismiss方法

你可能感兴趣的:(react native 底部输入框固定 键盘弹起不遮挡输入框 输入完毕隐藏键盘)