在 FlatList 中添加一个按钮 "see more"？

Question

我使用 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>
    );
  };
}

平面列表未显示：我得到：

Answer 1

设置状态数据（已完成==> this.state.listData）
将计数器设置为状态（初始化为 1）
在状态中设置 15 个第一个元素（您可以将其命名为“renderedData”或类似名称），然后将 cuonter 增加到 1
添加一个函数，通过将计数器增加一个来将“renderedData”增加 15 个项目
将 Footer component 添加到将调用您在第 3 阶段创建的函数的列表中

要从列表中只取 15（或 30/45/60 等）项目，您可以这样做：

this.setState({ renderedItem: listData.slice(0, counter*15) })

Answer 2

您可以使用每页限制的分页方法，以便进行精细控制

组件挂载时每页加载数组
每次点击都会增加每页并根据您的平面列表的每页更新数据
并且还放置了一个标志，用于检查数据何时结束，这将有助于在数据结束时隐藏加载更多按钮

工作示例：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>
    );
  }
}

在 FlatList 中添加一个按钮 "see more"？

Add a button "see more" in FlatList?

items

react-native

flatlist