react native 解决键盘弹起遮挡输入框问题

最新推荐文章于 2025-05-17 09:15:50 发布

三七二十几

最新推荐文章于 2025-05-17 09:15:50 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： react-native 文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_41534645/article/details/81031006

react-native 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了解决iOS模拟器中软键盘弹出时遮挡TextInput组件的问题。通过监听软键盘状态变化，调整ScrollView的paddingBottom或TextInput的bottom属性来避免遮挡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题:使用Textinput组件时,ios模拟器软键盘弹出会遮挡住输入框.

如何调出软键盘:
ios模拟器调出软键盘
解决思路:(其他情况类似)
1、Textinput在ScrollView中
当弹出软键盘时,计算软键盘的高度,state设置ScrollView的paddingBottom值加上软键盘的高度
2、Textinput固定在屏幕底部
当弹出软键盘时,计算软键盘的高度,state设置Textinput定位的bottom值加上软键盘的高度

代码:

import Keyboard from 'react-native'
componentDidMount() {
    // keyboardWillShow：软键盘将要显示
    // keyboardDidShow：软键盘显示完毕
    // keyboardWillHide：软键盘将要收起
    // keyboardDidHide：软键盘收起完毕
    // keyboardWillChangeFrame：软件盘的 frame 将要改变
    // keyboardDidChangeFrame：软件盘的 frame 改变完毕
    Keyboard.addListener('keyboardDidShow', (event) => {
    // console.log('keyboard:', event)
       this.setState({
         keyposition: isIphoneX() ? event.duration + 80 : event.duration,
       })
    })
    Keyboard.addListener('keyboardDidHide', (event) => {
        this.setState({
            keyposition: 0
        })
    })
}