1

所以我使用 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})
}

但是，我得到的结果是：当键盘在屏幕外设置动画时，文本输入的高度保持不变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>
4

1 回答 1

0

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

解决方案是使用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})
}
于 2017-07-15T08:30:38.230 回答