Представление сетки в React Native Flatlist - PullRequest
Новая
       77

Представление сетки в React Native Flatlist

0 голосов
/ 09 июля 2020

Как я могу добиться такого представления, подобного этому, в react native в компоненте FlatList?

Обычно в сети Это легко с css сеткой, но я не мог сделать это в react native.

введите описание изображения здесь

1 Ответ

0 голосов
/ 10 июля 2020

Если вы хотите визуализировать сетку n by n, вы можете использовать свойство FlatList numColumns. Затем вы можете просто передать данные в свойство data FlatList, чтобы указать, как визуализировать каждую ячейку в сетке, передав функцию в свойстве renderItem.

Примерный пример будет выглядеть так: 

import { FlatList } from "react-native";

<FlatList 
  data={myData}
  numColumns={3}
  renderItem={({ item }) => <MyCellComponent cellData={item} />}
/>

Однако ваш вопрос немного отличается, поскольку вы хотите отобразить неравномерную сетку. Вы можете разделить сетку на два отдельных компонента, ComponentA и ComponentB, и отобразить их внутри ScrollView как такового.

enter image description here

A rough code example would look like this:

import { ScrollView } from "react-native";

<ScrollView>
  <ComponentA />
  <ComponentB />
  <ComponentA />
</ScrollView>

Хотя, если вы действительно хотите использовать FlatList, тогда вы можете создать третий компонент, Component C, который в основном обернет предыдущий пример следующим образом: 

import { View } from "react-native";

function ComponentC() {
  return (
    <View>
      <ComponentA />
      <ComponentB />
      <ComponentA />
    </View>
  );
}

, а затем отобразит его внутри FlatList: 

<FlatList 
  data={myData}
  renderItem={({ item }) => (<ComponentC data={item} />)}
/>
...