React Native 聊天室置底输入框的设计

哎，我又绕回了最初的设计方式

先讲讲之前的设计思路，通过监听键盘的事件，为了接近完美的效果，我监听的是keyboardWillShow、keyboardWillHide
通过打印监听的返回信息，我成功的获得了键盘弹起、收起的动画参数，这个很重要，我可以将这个动画参数，完全提供给输入框，这样她们就可以同步移动，人不知鬼不觉，媲美原生效果，事实上我也是这么做的，代码如下

componentDidMount () {    /** 注册键盘弹起事件监听  */    this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this._keyboardWillShow.bind(this))    this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this._keyboardWillHide.bind(this))}componentWillUnmount () {  /** 移除键盘监听 **/  this.keyboardWillShowListener.remove()  this.keyboardWillHideListener.remove()}

通过监听键盘行为触发动画

/** 键盘弹起 */_keyboardWillShow (e) {  if (!this.state.keyboardHeight) this.setState({ keyboardHeight: e.endCoordinates.height })  Animated.timing(this.state.compositeAnim, {    toValue: 1,    easing: Easing.keyboard,    duration: 250  }).start()}/** 键盘收起 */_keyboardWillHide (e) {  console.log(e)  Animated.timing(this.state.compositeAnim, {    toValue: 0,    easing: Easing.keyboard,    duration: 250  }).start()}

<Animated.View style={{ flex: 1, transform: [{   translateY: this.state.compositeAnim.interpolate({     inputRange: [0, 1],     outputRange: [0, -keyboardHeight]   }) }]}}> <ScrollView   ref='scrollView'   style={{ marginBottom: px2dp(112) }}   automaticallyAdjustContentInsets={false}   onContentSizeChange={(contentWidth, contentHeight) => {     if (this.flexViewHeight && contentHeight > this.flexViewHeight - px2dp(112)) {       undefined !== this.refs.scrollView && this.refs.scrollView.scrollToEnd()     }   }} >   { undefined !== messageList && messageList.length > 0 && messageList.map((item, index) => this.renderItem(item, index)) } </ScrollView> <View style={{ padding: px2dp(50),   paddingTop: px2dp(16),   paddingBottom: px2dp(16),   position: 'absolute',   bottom: 0,   left: 0,   right: 0,   backgroundColor: Colors.C8 }}>   <TextInput style={{ height: px2dp(80), borderRadius: px2dp(10), backgroundColor: Colors.C8, fontSize: px2dp(26), color: Colors.C3, lineHeight: px2dp(36), padding: px2dp(20), borderWidth: 1, borderColor: Colors.C7 }} placeholder='我来说两句' placeholderTextColor={Colors.C5}     returnKeyType='send'     underlineColorAndroid='transparent'     onChangeText={(message) => this.setState({ message })}     value={message}     onSubmitEditing={() => { sendChatMessage({ receiver, message, type: '1' }); this.setState({ message: '' }) }}   /> </View></Animated.View>

一切都是那么完美，在IOS上，到了Android上，keyboardWillShow、keyboardWillHide，这两个时间根本监听不到，keyboardDidShow、keyboardDidHide如果监听这两个事件，效果就会大打折扣，这时候，看到了RN官网提供的这个组件

KeyboardAvoidingView

竟然不用监听、不用动画就可以实现效果

<KeyboardAvoidingView  behavior='position' contentContainerStyle={{ flex: 1 }} style={{ flex: 1 }}  keyboardVerticalOffset={px2dp(132)} >  <ScrollView    ref='scrollView'    style={{ }}    automaticallyAdjustContentInsets={false}    onContentSizeChange={(contentWidth, contentHeight) => {      if (this.flexViewHeight && contentHeight > this.flexViewHeight - px2dp(112)) {        undefined !== this.refs.scrollView && this.refs.scrollView.scrollToEnd()      }    }}  >    { undefined !== messageList && messageList.length > 0 && messageList.map((item, index) => this.renderItem(item, index)) }  </ScrollView>  <View style={{    padding: px2dp(50),    paddingTop: px2dp(16),    paddingBottom: px2dp(16),    bottom: 0,    backgroundColor: Colors.C8  }}>    <TextInput style={{ height: px2dp(80), borderRadius: px2dp(10), backgroundColor: Colors.C8, fontSize: px2dp(26), color: Colors.C3, lineHeight: px2dp(36), padding: px2dp(20), borderWidth: 1, borderColor: Colors.C7 }} placeholder='我来说两句' placeholderTextColor={Colors.C5}      returnKeyType='send'      underlineColorAndroid='transparent'      onChangeText={(message) => this.setState({ message })}      value={message}      onSubmitEditing={() => { sendChatMessage({ chatId: navigation.state.params.chatId, receiver: null, message, type: '1' }); this.setState({ message: '' }) }}    />  </View></KeyboardAvoidingView>

UI上做了一点调整就可以达到了很好的效果
（其实内心是拒绝的，之前那种方案还可以练习一下动画）