如何知道 FlatList 的最后一项

Question

我有一个平面列表。

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

目前工作是这样的；

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

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

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

参见下图。

如果上述方法没有帮助，并且您只需要知道您位于 a 中列表的末尾renderItem，则可以根据 的长度检查index提供的元数据中的。renderItemdata

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>
  );
}

小吃