React Native 键盘弹起、收起动画与输入框的动作（几乎）完美同步

之前做到聊天室的界面留下了一个待优化问题

这是静默状态

键盘弹起之后的状态

通过监听键盘的弹起、收起状态得到键盘高度，来更改输入框的绝对定位，达到让输入框处于键盘之上的目的，但是，效果很废物，因为，直接改变绝对定位没有动画效果，输入框和键盘没有一起转场的丝滑感觉，所以，通过打印监听事件的返回信息，我们找了解决问题的核心

首先，键盘动作的监听事件

/*键盘将要弹起*/
this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this._keyboardWillShow.bind(this))
/*键盘将要收起*/
this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this._keyboardWillHide.bind(this))

接着，监听事件触发动画

/** 键盘弹起 */
_keyboardWillShow (e) {
console.log('键盘弹起**************************')
console.log(e)
Animated.timing(this.state.compositeAnim, {
toValue: 258,
easing: Easing.keyboard,
duration: 250
}).start()
}
/** 键盘收起 */
_keyboardWillHide (e) {
console.log('键盘收起**************************')
console.log(e)
Animated.timing(this.state.compositeAnim, {
toValue: px2dp(2),
easing: Easing.keyboard,
duration: 250
}).start()
}

最后，动画View

 <Animated.View style={{ padding: px2dp(50),
paddingTop: px2dp(16),
paddingBottom: px2dp(16),
position: 'absolute',
bottom: this.state.compositeAnim,
left: 0,
right: 0,
width,
backgroundColor: Colors.C7
}}>
<TextInput style={{ height: px2dp(80), borderRadius: px2dp(10), backgroundColor: Colors.C8, fontSize: px2dp(26), color: Colors.C3, lineHeight: px2dp(36), padding: px2dp(20) }} placeholder='我来说两句' placeholderTextColor={Colors.C5}
onChangeText={(message) => this.setState({ message })}
value={message}
onSubmitEditing={() => alert(message)}
/>
</Animated.View>

完事，从效果上来说，几乎完美，为什么说几乎呢？

并没有完全同步上下，拿微信聊天界面的交互来做比较确实是比较明显，能想到的影响因素有几个，但是暂时还没有很好的方法做到定量计算。

最后

以上就是辛勤月亮为你收集整理的React Native 键盘弹起、收起动画与输入框的动作（几乎）完美同步的全部内容，希望文章能够帮你解决React Native 键盘弹起、收起动画与输入框的动作（几乎）完美同步所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。