反应:在父母的观点中组织儿童

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导航。

当前存在的四张卡片，其中3张恰好是屏幕外半部。

。

预先感谢。

Answer 1

我通过使用

做到了

 flexWrap: 'wrap'

像nimrod建议