动画文本输入的高度值

Question

所以我正在使用 react-native-autogrow-textinput 以便在我的应用程序中查看可编辑的文档。我目前正在尝试围绕键盘工作以调整文本输入框的高度，以便所有文本都可见。我找到了以下代码

componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide.bind(this));
}

componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
}

keyboardDidShow(e){
    let newSize = Dimensions.get('window').height- e.endCoordinates.height - 150;
    console.log(e.endCoordinates);
    this.setState({docViewHeight: newSize});
}

keyboardDidHide(e){
    let newSize = Dimensions.get('window').height - 170;
    this.setState({docViewHeight: newSize})
}

然而，我得到的结果是：当键盘动画离开屏幕时，textinput 的高度保持不变，let newSize = Dimensions.get('window').height- e.endCoordinates.height - 150，直到键盘完成滑出屏幕。

然后调整高度以再次填满整个屏幕，除了它有点 'pops' 到新的高度。我如何让这个高度的值逐渐增长，所以它看起来只是简单地扩展以适应整个屏幕？我的 Autogrow TextInput 代码也在下面 post。任何帮助将不胜感激。

<AutoGrowingTextInput
                    ref="editText"
                    editable = {this.state.editting}
                    style = {{fontSize: fontProperties.fontSize+3, marginLeft: 18, marginRight: 18, marginTop: 15}}
/*animate this*/    minHeight = {this.state.docViewHeight}
                    animation = {{animated: true, duration: 300}}
                    //has some other confidential props here for onChange etc
</AutoGrowingTextInput>

Answer 1

通过一些库文件挖掘后，我自己找到了答案。

解决方案是使用 keyboardWillHide 事件侦听器而不是 keyboardDidHide。

这将在键盘开始其结尾动画之前触发。我把代码放在下面。

componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow.bind(this));
    this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide.bind(this));
}

componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardWillHideListener.remove();
}

keyboardWillHide(e){
    let newSize = Dimensions.get('window').height - 170;
    this.setState({docViewHeight: newSize})
}

动画文本输入的高度值

Animating a height value for text input

reactjs

react-native

react-animated