如何将 2 个盒子放在同一行，然后在下面再放 2 个？等等

Question

我正在尝试放置 2 的元素，因为什么是数据 .map 并且我不能放置带有 flexDirection:“行”的分隔符 DIV，我需要进行换行并且它们被容纳但这样做是无法正常工作。

<View
  style={styles.container_cards}
>
  {
     data.map((elements, index) => {
        return(
           <CardTwoRows elements={elements}/>
        )
     })
   }
</View>

const styles = StyleSheet.create({
  container_cards: {
    width: "100%",
    height: "100%",
    marginTop: verticalScale(14),
    flexWrap: "wrap",
  },
})

我的 CardTwoRows，它基本上包含这个

<View style={styles.container}>
.........
</View>

const styles = StyleSheet.create({
  container: {
    width: "49%",
    height: verticalScale(220),
    borderRadius: scale(6),
    marginRight: "2%",
  },
})

这是它的外观示例，我需要显示 2，然后再显示行和 2 卡之间的空格

Answer 1

您可以使用这样的平面列表。

一个工作的demo 以及下面的代码

import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';

const list = [0, 1, 2, 3, 4, 5, 6, 7];
export default function App() {
  return (
    <View style={styles.container}>
      <FlatList
        data={list}
        numColumns={2}
        keyExtractor={(item)=> item}
        renderItem={({ item }) => (
          <View style={styles.card}>
            <Text style={styles.text}>{item}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  card: {
    height: 100,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#212121',
    margin: 5,
    borderRadius: 10,
  },
  text: {
    fontSize: 40,
    fontWeight: '600',
    color: 'white',
  },
});