如何在反应本机地图功能中创建网格结构？

Question

我想创建一个 4*5 的网格结构。创建这个我可以用 flexDirection:"row" 包装一个视图，每 4 个视图。但是我是通过地图函数渲染的。

<View style={{ alignItems: "center" }}>
  {this.props.color.primary.map((color) => {
    return <View key={color.key} style={[styles.color, { backgroundColor: color.code }]} />
  })}
</View>

我需要在每 4 个视图后用 View style={{flexDirection:"row"}} 包裹内部视图。如何实现这一目标。或者还有其他解决方案吗？

Answer 1

尝试使用 React Natives Flatlist。数组中的每个项目都非常高效地呈现，您可以根据需要设置它们的样式。 https://reactnative.dev/docs/flatlist

Answer 2

单独创建这个组件文件

import React from 'react'
import { View } from 'react-native'

export function CTMapList({
  data,
  renderItem,
  ListHeaderComponent,
  ListHeaderComponentStyle,
  ListFooterComponent,
  ListFooterComponentStyle,
  ListEmptyComponent,
  style,
  horizontal,
  ItemSeparatorComponent,
  numColumns
}) {
  const createGroup = () => {
    const dataGroup = []
    let groupCount = 0
    let group = []
    // eslint-disable-next-line array-callback-return
    data.map((item, index) => {
      if (groupCount === 0 && index !== 0) {
        dataGroup.push(group)
        group = []
      }
      group.push(item)
      groupCount++
      if (groupCount === numColumns) groupCount = 0
      if (data.length - 1 === index) dataGroup.push(group)
    })
    return dataGroup
  }

  return (
    <View style={style}>
      <View style={ListHeaderComponentStyle}>{ListHeaderComponent && ListHeaderComponent}</View>
      {(!data || data.length === 0) && ListEmptyComponent && ListEmptyComponent}
      {((numColumns && numColumns === 1) || !numColumns) && (
        <View style={{ flexDirection: horizontal ? 'row' : 'column' }}>
          {data &&
            data.map((item, index) => (
              <View key={String(index)}>
                <View>{renderItem && renderItem({ item, index })}</View>
                {data.length - 1 !== index && ItemSeparatorComponent}
              </View>
            ))}
        </View>
      )}
      {numColumns && numColumns !== 1 && (
        <View>
          {createGroup() &&
            createGroup().map((item, index) => (
              <View key={String(index)} style={{ flexDirection: 'row' }}>
                {item.map((item2, index2) => (
                  <View key={String(index2)} style={{ flex: 1 }}>
                    <View style={{ flex: 1 }}>{renderItem && renderItem({ item: item2, index: index2 })}</View>
                    {data.length - 1 !== index && ItemSeparatorComponent}
                  </View>
                ))}
              </View>
            ))}
        </View>
      )}

      <View style={ListFooterComponentStyle}>{ListFooterComponent && ListFooterComponent}</View>
    </View>
  )
}

然后通过这样做像平面列表一样使用它你可以避免嵌套可视化列表警告你需要用滚动视图包装这个组件

    <ScrollView
       bounces={false}
       overScrollMode="never"
       showsVerticalScrollIndicator={false}
       style={{ flex: 1 }}
    >
         <CTMapList
            data={sortedPackages}
            style={{ paddingHorizontal: 30, zIndex: -1 }}
            numColumns={2}
            keyExtractor={(item) => String(item.id)}
            renderItem={this.renderPackeges}
         />
    </ScrollView>

如何在反应本机地图功能中创建网格结构？

How to create grid structure in react native map function?

react-native

map-function