如何知道 FlatList 的最后一项答案

【问题标题】：How To Know Last Item of FlatList如何知道 FlatList 的最后一项
【发布时间】：2021-09-14 08:40:13
【问题描述】：

我有一个平面列表。

我想在项目之间添加逗号。

目前是这样工作的；

如果只有一项； Mon,

如果有多个项目； Mon, Tue, Wed,

我的代码；

<FlatList
  data={job.schedule}
  renderItem={({ item, index }) => (
    <View style={[[Layout.center], {}]}>
      <Text style={[[Fonts.textInterRegular12]]}>
        {item.dayHuman.slice(0, 3)}{', '}
      </Text>
    </View>
  )}
  horizontal
  keyExtractor={item => item.id}
  extraData={this.state}
  showsVerticalScrollIndicator={false}
/>

上面的代码有两个问题。

如果只有一项，我不想添加逗号。例如。 Mon

如果有多个项目，我不想在最后一个项目旁边添加逗号。例如。 Mon, Tue, Wed

我怎样才能做到这一点？

【问题讨论】：

标签： javascript react-native react-native-flatlist

【解决方案1】：

使用 ReactNative FlatList 时，您可以使用 FlatList 的 ItemSeparatorComponent 属性在每个项目之间渲染组件，但不能在列表的开头或结尾处。

您可以使用 FlatList 的 ListFooterComponent 属性在列表末尾渲染一些 JSX 或组件。

如果您需要知道您在renderItem 内的列表末尾，您可以检查提供给renderItem 的元数据中的index 与data 的长度。

const data = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];

export default function App() {
  return (
    <SafeAreaView>
    <FlatList
      data={data}
      renderItem={({ item, index }) => {
        const isEnd = index === data.length - 1;

        return (
          <View>
            <Text>
              {item}{isEnd && <Text>. </Text>}
            </Text>
          </View>
        );
      }}
      horizontal
      keyExtractor={(item) => item.id}
      extraData={this.state}
      showsVerticalScrollIndicator={false}
      ItemSeparatorComponent={() => <Text>, </Text>}
      ListFooterComponent={() => <Text>The End!</Text>}
    />
    </SafeAreaView>
  );
}

Snack

【讨论】：

感谢您的详细解答。 isEnd 完美运行。

【解决方案2】：

<FlatList
  data={job.schedule}
  renderItem={({ item, index }) => (
    <View style={[[Layout.center], {}]}>
      <Text style={[[Fonts.textInterRegular12]]}>
        {item.dayHuman.slice(0, 3)}
        {index !== job.schedule.length -1 && ', '}
      </Text>
    </View>
  )}
  horizontal
  keyExtractor={item => item.id}
  extraData={this.state}
  showsVerticalScrollIndicator={false}
/>

【讨论】：

【解决方案3】：

我想你正在寻找这个

<FlatList
      data={job.schedule}
      renderItem={({ item, index }) => (
        <View style={[[Layout.center], {}]}>
          <Text style={[[Fonts.textInterRegular12]]}>
            {item.dayHuman.slice(0, 3)}{index < job.schedule.length -1 ?', ':""}
          </Text>
        </View>
      )}
      horizontal
      keyExtractor={item => item.id}
      extraData={this.state}
      showsVerticalScrollIndicator={false}
    />

【讨论】：