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

Question

我正在尝试放置 2 的元素，因为数据 .map 是什么，我不能将分隔线 DIV 与 flexDirection: "row" 放在一起，我需要做一个包装，它们已容纳但无法正常工作。

<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，然后在行之间显示 space，然后再显示 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',
  },
});

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

How to put 2 boxes in the same row and then put 2 more underneath? and so on

styles

react-native