在ScrollView react-native中自动滚动
在ScrollView react-native中自动滚动
提问于 2018-06-15 12:53:25
我正在创建聊天应用程序，并希望自动滚动到底部的ScrollView每次收到新的消息。
下面是我的代码：
<ScrollView>
<FlatList
data={this.state.dataSource}
renderItem={({ item }) => <SenderChatRow data={item} />}
keyExtractor={(item, index) => index}
/>
{this._bookingRequestMessage()}
</ScrollView>回答 2
Stack Overflow用户
发布于 2018-06-15 13:01:05
在React Native 0.41和更高版本中，您可以使用以下命令：
<ScrollView
ref={ref => this.scrollView = ref}
onContentSizeChange={(contentWidth, contentHeight)=>{
this.scrollView.scrollToEnd({animated: true});
}}>
</ScrollView>看看Docs
更新
正如你提到的，当键盘打开时，你会遇到问题，首先：
import { Keyboard } from "react-native";
然后使用componentDidMount()
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow',
this._keyboardDidShow.bind(this));
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
_keyboardDidShow() {
this.scrollView.scrollToEnd({ animated: false })
}感谢chetan godiya的更新！
Stack Overflow用户
发布于 2018-06-15 13:19:15
对于scrollview，将下面这几行添加到scrollview中
<ScrollView
ref={(ref) => this.flatListRef = ref}
contentContainerStyle={{ flex: 1 }}
onContentSizeChange={(width, height) => this.flatListRef.scrollToEnd({ animated: false })}
>
然后从react-native导入键盘添加，然后将此代码添加到您的脚本中
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
}
}
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
_keyboardDidShow() {
this.scrollView.scrollToEnd({ animated: false })
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50869299
复制相关文章
相似问题
腾讯云开发者
