Flex React Native - 当内容到达边缘时，如何使用flex将内容分解到下一行

Question

我的样式容器中有一个图标列表，显示在flexDirection:'row'中，但是当图标的宽度超过视图宽度时，它们不会中断到下一行，而是继续向右移出视图。如果内容达到最大宽度，如何让内容中断到下一行？

样式：

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，那么第一行中的每一列都将采用尽可能多的高度，将第二行推到下面的第二行截图如下：