在FlatList中添加“查看更多”按钮？
问题描述 投票：0回答：3
我使用 flatList 来制作元素列表。我想显示 15 个元素，然后添加一个“查看更多”按钮来显示接下来的 15 个元素等。 我想使用本教程：https://aboutreact.com/react-native-flatlist-pagination-to-load-more-data-dynamically-infinite-list/ 但我不需要使用 fetch，我已经设置了数据（state.listData），事实上，我对如何适应它有点迷失......
我想也许有人可以帮助我一点。 非常感谢
this.state = {
selectedId: '',
setSelectedId:'',
listData:''
}
};
renderItem = ({ item }) => {
const backgroundColor = item.id === this.selectedId ? "transparent" : "fff";
return (
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
<Item
item={item}
onPress={() => this.props.navigation.navigate('UpdateTripsForm')}
style={{ backgroundColor }}
/>
<Image source={require("../../assets/images/arrow.png")} style={{width: 15, height:15, justifyContent: 'center'}}/>
</View>
);
};
initListData = async () => {
let list = await getFlights(0);
if (list) {
this.setState({
listData: list
});
}
};
render() {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={this.state.listData}
renderItem={this.renderItem}
maxToRenderPerBatch={15}
keyExtractor={(item) => item.id}
extraData={this.selectedId}
/>
<TouchableOpacity
style={styles.touchable2}
onPress={() => this.props.navigation.goBack()}
>
<View style={styles.view2}>
<Text style={styles.textimg2}>
{i18n.t("tripsform.action.back")}
</Text>
</View>
<Image
source={require("../../assets/images/btn-background.png")}
style={styles.tripsimg2}
/>
</TouchableOpacity>
</SafeAreaView>
);
};
}
我刚刚尝试了这个，感谢@Pramod 的回答：
const Item = ({ item, onPress, style }) => (
<TouchableOpacity onPress={onPress} style={[styles.flightsListitem, style]}>
<Text style={styles.h4}>{item.id}</Text>
</TouchableOpacity>
);
export default class FlightsList extends Component {
constructor(props) {
super(props);
this.state = {
selectedId: '',
setSelectedId:'',
listData:'',
page:1,
perPage:2,
loadMoreVisible:true,
displayArray:[]
}
};
renderItem = ({ item }) => {
const backgroundColor = item.id === this.selectedId ? "transparent" : "fff";
return (
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
<Item
item={item}
onPress={() => this.props.navigation.navigate('UpdateTripsForm')}
style={{ backgroundColor }}
/>
<Image source={require("../../assets/images/arrow.png")} style={{width: 15, height:15, justifyContent: 'center'}}/>
</View>
);
};
initListData = async () => {
let list = await getFlights(0);
if (list) {
this.setState({
listData: list
});
}
};
componentDidMount(){
this.setNewData()
// console.log(tempArray)
}
setNewData(){
var tempArray=[]
if(this.state.listData.length == this.state.displayArray.length){
this.setState({
loadMoreVisible:false
})
}else{
for(var i=0; i<(this.state.page*this.state.perPage); i++){
tempArray.push(this.state.listData)
}
this.setState({
displayArray: tempArray,
loadMoreVisible:true
})
}
}
loadMore(){
this.setState({
page: this.state.page+1
},()=>{
this.setNewData()
})
}
async UNSAFE_componentWillMount() {
this.initListData();
}
render() {
return (
<ImageBackground
source={require("../../assets/images/background.jpg")}
style={styles.backgroundImage}
>
<Header
backgroundImage={require("../../assets/images/bg-header.png")}
backgroundImageStyle={{
resizeMode: "stretch",
}}
centerComponent={{
text: i18n.t("mytrips.title"),
style: styles.headerComponentStyle,
}}
containerStyle={[styles.headerContainerStyle, { marginBottom: 0 }]}
statusBarProps={{ barStyle: "light-content" }}
/>
<SafeAreaView style={styles.container}>
<FlatList
data={this.state.displayArray}
renderItem={this.renderItem}
keyExtractor={(item) => item.id}
extraData={this.selectedId}
/>
{this.state.loadMoreVisible == true?
<Button style={{width:'100%', height:10, backgroundColor:'green', justifyContent:'center', alignItems:'center'}}
title = 'load more'
onPress={()=>{this.loadMore()}}>
</Button>:null}
<TouchableOpacity
style={styles.touchable2}
onPress={() => this.props.navigation.goBack()}
>
<View style={styles.view2}>
<Text style={styles.textimg2}>
{i18n.t("tripsform.action.back")}
</Text>
</View>
<Image
source={require("../../assets/images/btn-background.png")}
style={styles.tripsimg2}
/>
</TouchableOpacity>
</SafeAreaView>
</ImageBackground>
);
};
}
未显示平面列表：我得到：
3个回答
1
投票
投票
您可以使用具有每页限制的分页方法，以便您可以进行精细控制
- 组件挂载时每页加载数组
- 每次点击都会增加每页并基于平面列表的每页更新数据
- 还放置一个标志，用于检查数据何时结束，这将有助于在数据结束时隐藏加载更多按钮
工作示例：https://snack.expo.io/@msbot01/suspicious-orange
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
SafeAreaView,
SectionList,
Switch,
FlatList
} from 'react-native';
import Constants from 'expo-constants';
import Icon from 'react-native-vector-icons/FontAwesome';
import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
page:1,
perPage:2,
loadMoreVisible:true,
DATA: [{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'fourth Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'fifth Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29sd72',
title: 'sixth Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29dr72',
title: 'seventh Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d7w2',
title: 'Eight Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29ad72',
title: 'Nineth Item',
},
{
id: '58694a0f-3da1-471f-bd96-14557d1e29d72',
title: 'Tenth Item',
}],
displayArray:[]
}
}
componentDidMount(){
this.setNewData()
// console.log(tempArray)
}
setNewData(){
var tempArray=[]
if(this.state.DATA.length == this.state.displayArray.length){
this.setState({
loadMoreVisible:false
})
}else{
for(var i=0; i<(this.state.page*this.state.perPage); i++){
tempArray.push(this.state.DATA[i])
}
this.setState({
displayArray: tempArray,
loadMoreVisible:true
})
}
}
loadMore(){
this.setState({
page: this.state.page+1
},()=>{
this.setNewData()
})
}
render() {
return (
<View style={{ flex: 1 }}>
<FlatList
data={this.state.displayArray}
renderItem={({item})=>
<View style={{flexDirection:'row'}}>
<Text style={{fontSize:20}}>{item.title} </Text>
</View>
}
keyExtractor={item => item.id}
/>
{this.state.loadMoreVisible == true?
<View style={{width:'100%', height:10, backgroundColor:'green', justifyContent:'center', alignItems:'center'}} onClick={()=>{this.loadMore()}}>Load more</View>:null
}
</View>
);
}
}
1
投票
投票
- 在state中设置数据（已经完成==> this.state.listData）
- 将计数器设置为状态（初始化为1）
- 将 15 个第一个元素设置为状态（您可以将其命名为“renderedData”或类似名称），然后将 cuonter 增加到 1
- 添加一个函数，通过将计数器增加 1，将“renderedData”增加 15 项
- 将页脚组件添加到列表中，它将调用您在第3阶段创建的函数
要从列表中仅获取 15（或 30/45/60 等）项目，您可以执行以下操作：
this.setState({ renderedItem: listData.slice(0, counter*15) })
0
投票
投票
现在 React FlatList 支持页脚组件，查看：https://reactnative.dev/docs/flatlist#listfootercomponent
最新问题
- 连接多个MySQL表，其中一个表中的某些数据可能不存在
- 在 Angular 中将 viewChild 信号与 RxJS 一起使用时如何避免“未定义”错误？
- 当我尝试下载时，Laravel-excel 返回空白页面
- 我遇到了材料顺风轮播组件的问题
- 使用 pyspark，并下载了 hadoop-aws:3.3.4，我仍然收到“方案“s3”没有文件系统”错误
- 如何通过按下 Surfacegui 上的按钮来打开 screengui 中的框架？
- 如何在 init 脚本中设置全局 Gradle 属性？
- 从使用 gstreamer 读取的相机显示时丢失帧
- python 的奇怪行为``@property```
- Git 提交被拒绝
- 使用cs_Oracle插入突然需要很长时间，但在sql Developer中一切正常
- 使用react-leaflet渲染GeoJSON
- 如何检测设备何时进入 Android N 的多窗口模式
- 如何使用javascript停止按钮onclick事件？
- 由于“unsigned int”导致运行时错误
- 应用程序重启后的OnActivityResult
- Django-tables2 链接到项目的其他应用程序：TemplateDoesNotExist 错误
- 未捕获的引用错误：使用 React 和 Firebase 的前端代码中未定义进程
- 如何从我的终端退出本地主机
- Excel VBA 宏适用于 Mac，但不适用于 PC
© www.soinside.com 2019 - 2024. All rights reserved.