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

Question

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

这是我的卡片组件：

<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>

*抱歉，我粘贴时缩进弄乱了

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

目前存在的四张牌，其中三张在屏幕上，第四张在屏幕外。

提前致谢。

Answer 1

我用

做到了

 flexWrap: 'wrap'

喜欢尼姆罗德的建议

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

react-native: Organizing children in a parent view

reactjs

react-native

react-navigation