React Native中当键盘打开时更新ScrollView

Question

我想知道如何在React Native中打开键盘时更新scrollview？ 我尝试使用"ScrollView"中的"onContentSizeChange"，可以正常工作，但是当我打开键盘时，滚动视图不会更新（底部）。当我点击输入框以发送文本（1）时，当键盘打开时，滚动视图不会更新（2）。我想要更新我的scrollview（3）。

MessageList.js

export default class MessageList extends React.Component {
    render() {
        return (
            <View style={MessageListStyles.container}>
                <ScrollView
                    ref={ref => this.scrollView = ref}
                    onContentSizeChange={(contentWidth, contentHeight)=>{
                        this.scrollView.scrollToEnd({animated: true});
                    }}
                    contentContainerStyle={{
                        flexGrow: 1,
                        justifyContent: 'space-between'
                    }}>
                      <Message sender="bot" />
                      <Message sender="bot" />
                      <Message sender="bot" />
                      <Message sender="bot" />
                      <Message sender="bot" />
                      <Message sender="bot" />
                      <Message sender="bot" />
                </ScrollView>
            </View>
        );
    }
}

- Jérémie Chazelle

Answer 1

你想在键盘出现时将scrollview移开吗? 如果是的话，可以使用KeyboardAvoidingView，它根据你的需要添加底部或顶部填充。

或者，你可以添加一个监听器，一旦键盘打开，就触发滚动到末尾的代码:keyboardDidShowListener。

- tvanlaerhoven

---

感谢您的回答。请问如何添加底部或顶部内边距？ - Jérémie Chazelle

请查看示例页面上的“behavior”属性。它可以有“padding”（根据键盘位置添加底部/顶部填充）、“position”（向上/向下移动）或“height”（缩放内容）的值。 - tvanlaerhoven