Подробное объяснение того, как использовать ListView renderSectionHeader

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... Я хочу, чтобы он отобразил список всех элементов 19 марта 2018 года, а затем отобразил элементы от 20 марта 2018 г. также под заголовком.
Я использовал 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)}
          />`

Пример того, что я хочу, это здесь, но я хочу знать, как это можно сделать с приведенным выше массивом


react-native javascript listview react-native-listview
person Jeremiah    schedule 24.03.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

ListView больше не доступен в React-Native. Вы можете использовать FlatList. Это очень просто, а затем ListView.

1) Импорт 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
        );
    }

Подробнее о FlatList можно узнать из здесь. Еще один пример для заголовка в FlatList

person Nirmalsinh    schedule 25.03.2018
comment
Я хочу знать, как это делается в ListView, пожалуйста... И вы ничего не сказали о renderSectionHeader - person Jeremiah; 25.03.2018
comment
Я хочу иметь возможность использовать renderSectionHeader... Не просто прокручивать его - person Jeremiah; 25.03.2018
comment
В FlatList есть опция. Просто проверьте список, который я приложил. - person Nirmalsinh; 25.03.2018
comment
Вау, это кажется очень полезным, хотя я никогда не использовал его раньше... Итак, у вас есть рабочий пример того, как я могу использовать реквизит listViewHeader в FlatList? - person Jeremiah; 25.03.2018
comment
Я привел вам пример для FlatList. Вы можете добавить свой верхний/нижний колонтитул по своему усмотрению. Обратитесь по ссылке, вы получите больше информации. - person Nirmalsinh; 25.03.2018
comment
Большое спасибо. Но мне нужен рабочий пример, пожалуйста... Как перебирать массив объектов - person Jeremiah; 25.03.2018
comment
renderItem={this.renderItem.bind(this)} Это запуск просмотра. renderItem будет вызывать до подсчета вашего массива. - person Nirmalsinh; 25.03.2018
comment
google .com.ng/amp/s/moduscreate.com/blog/ - person Jeremiah; 25.03.2018
comment
Это пример, который я хочу построить, но я хочу знать функцию, которую я могу использовать для получения идентификатора раздела и dataBlob с указанным выше массивом объектов. - person Jeremiah; 25.03.2018
comment
Ознакомьтесь с этим примером: docs.nativebase.io/docs/examples/FlatListExample.html - person Nirmalsinh; 25.03.2018
comment
Я не буду ... Большое спасибо - person Jeremiah; 25.03.2018