如何知道 FlatList 的最后一项

Question

我有一个 FlatList。

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

目前正在这样工作；

如果只有一项； 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

我怎样才能做到这一点？

Answer 1

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

Answer 2

使用 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

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

如何知道 FlatList 的最后一项

How To Know Last Item of FlatList

javascript

react-native

react-native-flatlist