flexbox - Flex React Native——当内容到达边缘时如何使用 Flex 使内容中断到下一行

Question

我的样式容器内有一个图标列表，这些图标显示在 flexDirection:'row' 中，但是当图标多于 View 宽度时，它们不会中断到下一行，而是继续到右边看不见的地方。如果内容达到最大宽度，如何让内容中断到下一行？

样式:

var styles = StyleSheet.create({
  container: {
    width: SCREEN_WIDTH, //width of screen
    flexDirection:'row',
    backgroundColor: 'transparent',
    marginTop:40,
    paddingLeft:10,
    paddingRight:10,
    flex: 1,
  },
  iconText:{
    paddingLeft:10,
    paddingRight:10,
    paddingTop:10,
    paddingBottom:10
  },
});

渲染:

<View style={styles.container}>

      <TouchableHighlight
        onPress={() => this.changeIcon(indexToChange, icons[0])}
        underlayColor='#F7F7F7'>
          <Text style={styles.iconText}><IonIcons name={icons[0]} size={30} color="#555" /></Text>
      </TouchableHighlight>

      <TouchableHighlight
        onPress={() => this.changeIcon(indexToChange, icons[1])}
        underlayColor='#F7F7F7'>
          <Text style={styles.iconText}><IonIcons name={icons[1]} size={30} color="#555" /></Text>
      </TouchableHighlight>

      <TouchableHighlight
        onPress={() => this.changeIcon(indexToChange, icons[2])}
        underlayColor='#F7F7F7'>
          <Text style={styles.iconText}><IonIcons name={icons[2]} size={30} color="#555" /></Text>
      </TouchableHighlight>

      ...//more continued on

</View>

当图标达到右侧的宽度时，它们不会断到底部。这可能吗？

Answer 1

您可以将 flexWrap: 'wrap' 和 alignItems: flex-start (或 stretch 以外的任何内容)添加到您的容器样式中。

如果您未指定 align-items 或设置了 align-items:stretch，则第一行中的每一列将采用尽可能多的高度，将第二行推到下面有点像下面的屏幕截图: