Javascript 如何加上「;“加载更多”;在具有Firebase数据库的ListView末尾(react native)

Javascript 如何加上「;“加载更多”;在具有Firebase数据库的ListView末尾(react native),javascript,listview,react-native,firebase-realtime-database,expo,Javascript,Listview,React Native,Firebase Realtime Database,Expo,我有一个Firebase数据库,其中有很多组件,通常需要很长时间才能在我正在使用Expo构建的应用程序的活动中一次加载 我在想,在每5个项目之后用“查看更多”或“加载更多”对活动进行分页会使它更快,但我不知道如何做到这一点。我在代码中的不同位置尝试过:size:1、firstVisibleRow:0、leastVisibleRow:0、greatestVisibleRow:0、itemsToShow:1、rowsToDisplay:1、expanded:false,但都不起作用 有人能帮我用Li

我有一个Firebase数据库,其中有很多组件,通常需要很长时间才能在我正在使用Expo构建的应用程序的活动中一次加载

我在想,在每5个项目之后用“查看更多”或“加载更多”对活动进行分页会使它更快,但我不知道如何做到这一点。我在代码中的不同位置尝试过:
size:1、firstVisibleRow:0、leastVisibleRow:0、greatestVisibleRow:0、itemsToShow:1、rowsToDisplay:1、expanded:false
,但都不起作用

有人能帮我用ListView解决这个问题吗?我附上以下主要代码:

从“React”导入React;
进口{
ListView,
样式表,
文本
看法
触控高光,
AlertIOS
}从“反应本机”;
进口{
常数
}来自“世博会”;
从“/firebase”导入firebase;
const StatusBar=require('../Firebase/StatusBar');
const ActionButton=require('../Firebase/ActionButton');
const ListItem=require('../Firebase/ListItemEventsNew');
const styles=require('../Firebase/styles.js');
导出默认类事件\u新扩展的React.Component{
建造师(道具){
超级(道具);
此.state={
数据源:新建ListView.dataSource({
行已更改:(行1,行2)=>行1!==行2,
}),
//尺寸:1,
//firstVisibleRow:0,
//leastVisibleRow:0,
//最大可见行:0,
//项目展示:1,
//行显示:1,
//扩展:false
};
this.itemsRef=this.getRef().child('-Events');
}
getRef(){
返回firebase.database().ref();
}
listenformes(itemsRef){
itemsRef.on('值',(捕捉)=>{
//将子对象作为数组获取
var项目=[];
snap.forEach((子项)=>{
推({
标题:child.val().headline,
_关键字:child.key
});
});
这是我的国家({
数据源:this.state.dataSource.cloneWithRows(items),
//项目展示:1,
//行显示:1,
//扩展:false
});
});
}
componentDidMount(){
this.listenforms(this.itemsRef);
}
render(){
报税表(<
视图样式={
样式.容器
} >
<
StatusBar title=“事件”/>
<
ListView数据源={
this.state.dataSource
}
renderRow={
这个.\u renderItem.bind(这个)
}
enableEmptySections={
符合事实的
}
样式={
styles.listview
}
/>
<
/查看>
)
}
//铂丁醇加成
_附加项(){
AlertIOS.prompt(
“添加新项目”,
空[{
文本:“取消”,
onPress:()=>console.log('Cancel Pressed'),
样式:“取消”
},
{
文本:“添加”,
onPress:(文本)=>{
此.itemsRef.push({
标题:正文
})
}
},
],
“纯文本”
);
}
_renderItem(项目){
const onPress=()=>{
警报(
"完成",,
空[{
文本:“完成”,
onPress:(text)=>this.itemsRef.child(item.\u key).remove()
},
{
文本:“取消”,
onPress:(text)=>console.log('Cancelled')
}
]
);
};
报税表(<
ListItem项目={
项目
}
onPress={
onPress
}
/>
);
}
}
您可以检测 滚动到达底部=>获取更多数据=>更改状态=>显示更多行

onEndReached={this.loadMoreActivities}

loadMoreActivities = () => {
  // fetch data here
}

您应该使用
debounce
进行优化。关键词
debounce lodash

谢谢。这听起来像是正确的算法,但我该怎么做呢?你能给我更多的提示吗?在你的回答之后,我找到了一些关于OneDreached的文档,但我不确定如何将其组合在一起。明天再试。非常感谢你的帮助。