Question

const users = 

    [

        {
          name: "Joy soap",
          customerName: "Salomy",
          date: "19 March 2018",
          time: "08:46am",
          amount: 3000,
          status: "paid",
          number: 24,
          images:
            "https://snack1.amazonaws.com/~asset/9d799c33cbf767ffc1a72e53997218f7"
        },
        {
          name: "Closeup tooth paste",
          customerName: "Salomy",
          date: "19 March 2018",
          time: "08:46am",
          amount: 3000,
          status: "paid",
          number: 20,
          images:
            "https://1.amazon4d99c3d76575cc03c2a7f816280"
        },
        {
          name: "Iman Powder",
          customerName: "Emanbe",
          date: "20 March 2018",
          time: "11:25am",
          amount: 3000,
          status: "paid",
          number: 12,
          images:
            "https://1.amazonaws.com/~asset/ee06c63d01543a44631c3421df6ee5fa"
        },
        {
          name: "John Bellion",
          customerName: "Okonkwo Chioma",
          date: "20 March 2018",
          time: "08:46am",
          amount: 3000,
          status: "paid",
          number: 3,
          images:
            "https://sn1.amazonaws.com/~asset/ee06c63d01543a44631c3421df6ee5fa"
        }
      ];

请问我有一个像上面这样的对象数组，我想在ListView中使用指向user.date的Section Header函数进行渲染...我希望它在2018年3月19日呈现所有项目的列表，然后在2018年3月20日的标题下呈现项目我已经多次使用过ListView，但是我从来没有能够以这种方式使用上面的对象数组。请详细解释详细解释。我知道这对你们中的一些人来说可能是一项简单的任务，但请善待。我需要一个renderSectionHeader（）函数，可以根据日期组织数据，这样我就可以在我的列表视图中渲染它

`<ListView
            ref={ref => (this.scrollView = ref)}
            onContentSizeChange={() => {
              this.scrollView.scrollToEnd({ animated: false});
            }}
            dataSource={this.state.userDataSource}
            renderRow={this.renderRow.bind(this)}
            renderSectionHeader={this.renderSectionHeader.bind(this)}
          />`

我想要的一个例子是here，但我想知道如何使用上面的数组

Answer 1

React-Native中不再提供ListView。您可以使用 FlatList 。它也非常简单，然后是ListView。

1）从react-native导入FlatList：

import { FlatList } from 'react-native';

2）将下面的代码复制到 render（）方法中。

         <FlatList
                horizontal={true/false}
                style={YOUR_COSTOM_STYLE}
                data={YOUR_ARRAY}
                renderItem={this.renderItem.bind(this)}
                keyExtractor={(item, index) => String(index)}
            />

3）您在 renderItem 方法中为您的单元格执行必要的操作。

// Render Methods
    renderItem({ item }) {
        return (
            // DO_YOUR_STUFF
        );
    }

您可以从here了解有关FlatList的更多详细信息。 header in FlatList

的另一个例子

有关如何使用ListView的详细说明renderSectionHeader

1 个答案: