Question

所以我使用的是react-native-autogrow-textinput，以便在我的应用程序中显示可编辑的文档。我目前正在尝试使用键盘来调整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})
}

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

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

<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。

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

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})
}

动画文本输入的高度值

1 个答案: