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

问题:使用Textinput组件时,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
        })
    })
}

打印event:

iphoneX 需在软键盘高度的基础上加78