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>

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

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