javascript - 如何知道 FlatList 的最后一项

Question

我有一个 FlatList。

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

目前是这样工作的；

如果只有一项；周一，

如果有多个项目；周一、周二、周三

我的代码；

<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}
/>

上面的代码有两个问题。

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

如果有多项，我不想在最后一项旁边添加逗号。例如。 周一、周二、周三

我怎样才能做到这一点？

Answer 1

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

您可以使用 FlatList 的 ListFooterComponent 和 ListHeaderComponent 属性在列表的末尾或开头呈现一些 JSX 或组件。

见下图。

---

如果以上没有帮助，你只需要知道你在 renderItem 中的列表末尾，你可以检查 index根据 data 的长度提供给 renderItem 的元数据。

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

---