javascript - ScrollView 中的自动滚动 react-native
问题描述
ScrollView
我正在创建聊天应用程序,并希望在每次收到新消息时自动滚动到底部。
这是我的代码:
<ScrollView>
<FlatList
data={this.state.dataSource}
renderItem={({ item }) => <SenderChatRow data={item} />}
keyExtractor={(item, index) => index}
/>
{this._bookingRequestMessage()}
</ScrollView>
解决方案
从 React Native 0.41 及更高版本你可以使用这个:
<ScrollView
ref={ref => this.scrollView = ref}
onContentSizeChange={(contentWidth, contentHeight)=>{
this.scrollView.scrollToEnd({animated: true});
}}>
</ScrollView>
看看文档
更新
正如您提到的,您在打开键盘时遇到问题,首先:
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的更新!
推荐阅读
- windows - 根据具有排除项的组成员身份更改 Active Directory 用户属性
- python-3.x - 如何从 PySpark UDF 中引发的 Py4JJavaError 中获取原始 Python 错误
- postgresql - 如何优化批量插入?
- hibernate - Hibernate CrudRepository 本机查询不使用 to_timestamp 函数返回结果
- c# - 如何知道是否有来自 Windows 服务的交互式会话处于活动状态?
- python - 浏览全局 file_name 变量中的图像后 imread 出错
- javascript - IE>10浏览器通过js获取上一个URL
- javascript - socket.io 在 node.js 中等待响应
- magento2 - 在送货地址中,我希望按城市计算运费,因为它们默认使用国家和邮政编码
- css - 将 SVG 路径设为 100% 宽度?