react-native：在父视图中组织子项

Question

我有这个视图，里面有'卡片'。当我添加一个无法在视图中完全显示的组件时，我希望它移动到下一行。

这是我的卡组件：

<TouchableOpacity
    style={{
      borderRadius: 9,
      borderBottomRightRadius: 9,
      margin: 9,
    }}
    onPress={this.props.onPress}
  >

    <Image style={{
      borderRadius: 9,
      opacity: 3,
      width: 93,
      height: 93,
      tintColor: '#976D2B'
    }}

      source={this.props.source}
    />

    <Text style={{
      borderRadius: 9,
      color: '#63461E', //brown
      fontWeight: 'bold',
      fontSize: 16,
      textAlign: 'center',
    }}>
      {this.props.text}
    </Text>

  </TouchableOpacity>

这是屏幕代码：

 <View 
                        style={{flexDirection: 'row', alignContent: 'center', alignItems: 'center', justifyContent: 'flex-end'}}
                    >

                        {/*card 1*/}
                        <Card
                            onPress={() => navigate('General')}
                            source={require('../resources/icons/information.png')}
                            text={'General Info'}
                        >
                        </Card>

                        {/*card 2*/}
                        <Card
                            onPress={() => navigate('Grades')}
                            source={require('../resources/icons/information.png')}
                            text={'Grades'}
                        >
                        </Card>

                        {/*card 3*/}
                        <Card
                            onPress={() => navigate('Grades')}
                            source={require('../resources/icons/information.png')}
                            text={'Lunch Menu'}
                        >
                        </Card>

                        {/*card 4*/}
                        <Card
                            onPress={() => navigate('Grades')}
                            source={require('../resources/icons/information.png')}
                            text={'Bell Schedules'}
                        >
                        </Card>

                    </View>

*抱歉，当我粘贴时，缩进就搞砸了

对于某些背景，我正在使用反应导航。

目前存在的四张牌，其中3张是普通视图，但是第四张是半屏外的。

提前致谢。

Answer 1

我是通过使用它做到的

 flexWrap: 'wrap'

像尼姆罗德建议的那样