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

Posted 2023-02-22

【中文标题】如何将 2 个盒子放在同一行，然后在下面再放 2 个？等等

【英文标题】：How to put 2 boxes in the same row and then put 2 more underneath? and so on

【发布时间】：2022-01-18 21:11:30

【问题描述】：

我正在尝试放置 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 卡之间的空格

【参考方案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',
  ,
);

【讨论】：

我有这段代码有一段时间了，我很确定我在另一个***帖子上找到了它，但是我找不到它。时间太长了。