Как обрабатывать данные элемента плоского списка в реагирующем?

Question

Как обрабатывать данные элемента плоского списка в реагирующем?

1

Я использую React-native Flat List, в котором я прошел отсортированный массив в реквизиты данных. Теперь я хочу показать элементы в соответствии с датой MY code:

 <FlatList
   horizontal={true}
   keyExtractor={(item, index) => index.toString()}
   data={this.state.Data}
   renderItem={({ item }) =>
     <View>
       <Image source = {{uri: item.image}}/>
       <Text>{item.date}</Text>
     </View>                           
    }
 />

Я хочу, чтобы мое изображение показывалось в соответствии с item.date.For Например:

Date - 20-09-2018
Image1 ..Image 2...
Date - 21-09-2018
Image1..Image2 ...

Помоги мне !!

prashant dexbytes 21 сен. 2018, в 16:34

Источник

Теги:

javascript

react-native

1 ответ

Ещё вопросы

pritesh · Answer 1 · 2018-09-21T11-44-00.000Z

Вы можете использовать SectionList для этой цели, поскольку он предоставляет хороший API для обработки таких случаев.

<SectionList
    style={{ flex: 1 }}
    keyExtractor={(item, index) => index.toString()}
    renderItem={this.renderItem}
    renderSectionHeader={this.renderSectionHeader}
    sections={list || []}
    ItemSeparatorComponent={this.renderSeparator}
/>

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

[
    {
        heading: 'Date - 20-09-2018',
        data: [Image1, Image2]
    },
    {
        heading: 'Date - 21-09-2018',
        data: [Image1, Image2]
    }
]

Таким образом, функция renderSectionHeader будет выглядеть примерно так:

renderSectionHeader = ({section}) => {
    return (
        <View>
            <Text>{section.heading}</Text>
        </View>
    )
}

И все остальные функции, такие как renderItem, renderSeparator и т.д., Вы можете определить, как хотите.

Проверьте эту ссылку для получения дополнительной информации

undefined не является объектом (оценивающим 'section.data.length'), они дали мне такую ошибку
Где вы пробовали section.data.length В renderSectionHeader() ??
хорошо это хорошо, я сделал это благодаря
Дата: Img1, img2 Дата: Img1 Я не хочу по вертикали ... Я хочу показать все изображения по горизонтали
просто добавьте эту horizontal={true} ru из stackoverflow.com/questions/46452773/…