React native 如何使用flex每行放置2张卡

我将提供我正在尝试执行的操作的图像：

一个是我想要的，一个是显示问题的，最后我将显示代码

第一张图片（我希望它是什么样子）：

第二张图片（当我有第三张卡时的样子）

代码如下：

<ScrollView>
    <View style={{ padding: 10 }}>
        <View style={{ paddingTop: '5%' }}></View>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>

            {this.state.subjects.map(subject => {
                return (
                    <View key={subject.id}>
                        <TouchableOpacity onPress={() => this.props.navigation.navigate('ViewSubject', { id: subject.id })}>
                            <ImagedCarouselCard
                                width={180}
                                height={180}
                                text={subject.name}
                                shadowColor="#051934"
                                source={{
                                    uri: "http://site.test/" + subject.icon,
                                }}
                            />
                        </TouchableOpacity>
                    </View>
                )
            })}
        </View>
        <View style={{ paddingTop: '2%' }}></View>
    </View>
</ScrollView>

{this.state.subjects.map（subject=>{
返回(
this.props.navigation.navigate（'ViewSubject'，{id:subject.id}）}>
)
})}

在容器样式中将

flexWrap

设置为

wrap

将每张卡的

宽度设置为
（屏幕宽度-卡边距*3）/2

这是我的功能组件示例

但是使用平面列表并将

numColumns

设置为2更有用

const主题=[
{id:1，名称：'Card 1'}，
{id:2，名称：'Card 2'}，
{id:3，姓名：'Card 3'}，
{id:4，名字：'Card 4'}，
];
常数cardGap=16；
const cardWidth=（Dimensions.get（'window'）.width-cardGap*3）/2；
返回(
{subject.map（（subject，i）=>{
返回(
{subject.name}
);
})}
);

您可以看到

flexWrap

---

是的，刚刚添加了

flexWrap

，但显然第三张卡没有碰到它上面的那张卡。也许这就是为什么您添加了

屏幕宽度-卡片边距*3

？但是，在实际代码中会是怎样的呢？我有点困惑。谢谢你的回复@丹尼洛文我把实际的片段again@DanielLogvin等等，我会很快把我的例子和

cardGap

的定义放在哪里？我感谢你的帮助：）太棒了！我真的很感激，非常感谢！

const subjects = [
    { id: 1, name: 'Card 1' },
    { id: 2, name: 'Card 2' },
    { id: 3, name: 'Card 3' },
    { id: 4, name: 'Card 4' },
  ];

  const cardGap = 16;

  const cardWidth = (Dimensions.get('window').width - cardGap * 3) / 2;

  return (
    <ScrollView>
      <View
        style={{
          flexDirection: 'row',
          flexWrap: 'wrap',
          justifyContent: 'center',
        }}
      >
        {subjects.map((subject, i) => {
          return (
            <View
              key={subject.id}
              style={{
                marginTop: cardGap,
                marginLeft: i % 2 !== 0 ? cardGap : 0,
                width: cardWidth,
                height: 180,
                backgroundColor: 'white',
                borderRadius: 16,
                shadowOpacity: 0.2,
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <TouchableOpacity>
                <Text>{subject.name}</Text>
              </TouchableOpacity>
            </View>
          );
        })}
      </View>
    </ScrollView>
  );