如何获取平面列表中呈现的项目数？答案

【问题标题】：How to get the number of items rendered in a Flat list?如何获取平面列表中呈现的项目数？
【发布时间】：2020-11-15 01:56:30
【问题描述】：

我有一个平面列表，它将数据发送到另一个组件，在该组件中数据被过滤，然后平面列表呈现过滤后的项目。我想获取平面列表呈现的项目数（即数据过滤后的剩余项目数）。请问我该怎么做？这是平面列表

           <FlatList
              style={styles.scrollContainer}
              data={this.state.schedules}
              keyExtractor={item => item.id.toString()}
              horizontal={false}
              showsHorizontalScrollIndicator={false}
              renderItem={({ item }) => <Today schedule={item} updateSchedule={this.updateSchedule}/>}
              keyboardShouldPersistTaps="always"
           />}

以及过滤数据的组件；

               {schedule.once && today == schedule.date ?
                    
                    <TouchableOpacity
                        onPress={() => this.toggleScheduleModal()}
                    >
                        <View style={[styles.listContainer, {borderLeftWidth: 4}, {borderLeftColor: schedule.color}]}>
                        
                            <View style={styles.time}>
                                <Text style={styles.timeText}>{schedule.stime}</Text>
                                <Text style={styles.timeText}>{schedule.etime}</Text>
                            </View>
                            <View style={styles.title}>
                                <Text style={styles.noteText} numberOfLines={1}>
                                    {schedule.name}
                                </Text>
                                <Text style={styles.subtitle} numberOfLines={1}>
                                    {schedule.type}
                                </Text>
                            </View>
                            <View style={styles.day}>
                                <Text style={styles.subtitle} numberOfLines={1}>
                                    Today
                                </Text>
                                <Text style={styles.subtitle} numberOfLines={1}>
                                    {schedule.teacher}
                                </Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                    :
                   []
                }

数据被过滤并按预期呈现。我只是想知道如何计算数字。请帮忙。

【问题讨论】：

标签： reactjs react-native react-native-flatlist

【解决方案1】：

我相信你可以使用Children.toArray(children)这个方法来统计有多少渲染的item。

我不知道您将在特定结构中的何处使用它，但您需要将 childrenprop 传递给该方法。孩子们，在这种情况下，我相信这将是您过滤数据的组件。

另一种选择是在渲染组件之前过滤数据，这只是获取数组长度的问题。


const filterData = () => {

  // need to define `today` here
  const filteredSchedules = this.state.schedules.filter(schedule => schedule.once && today == schedule.date);
console.log(filteredSchedules.length);
  return filteredSchedules;
 
}

<FlatList
              style={styles.scrollContainer}
              data={filterData()}
              keyExtractor={item => item.id.toString()}
              horizontal={false}
              showsHorizontalScrollIndicator={false}
              renderItem={({ item }) => <Today schedule={item} updateSchedule={this.updateSchedule}/>}
              keyboardShouldPersistTaps="always"
           />}

【讨论】：

【解决方案2】：

你可以试试这个当前渲染的索引。

 onViewableItemsChanged = ({ viewableItems, changed }) => {
console.log("Visible items are", viewableItems);
console.log("Changed in this iteration", changed);

}

 <FlatList
    onViewableItemsChanged={this.onViewableItemsChanged }
    viewabilityConfig={{
      itemVisiblePercentThreshold: 50
    }}
  />

【讨论】：