在FlatList中添加“查看更多”按钮？

如何解决在FlatList中添加“查看更多”按钮？

我使用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: '',listData:'',page:1,perPage:2,loadMoreVisible:true,displayArray:[]
    }
  };


  renderItem = ({ item }) => {
    const backgroundColor = item.id === this.selectedId ? "transparent" : "fff";

    return (
      <View style={{flexDirection: 'row',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>
    );
  };
}

不显示单位列表：我得到：

解决方法

将数据设置为状态（已完成==> 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) })

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

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

工作示例：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',title: 'fourth Item',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中添加“查看更多”按钮？

如何解决在FlatList中添加“查看更多”按钮？

解决方法

相关推荐