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,第一行中的每一列都将采用尽可能多的高度,将下面的第二行推到下面的屏幕截图中:

Answer 2

对于我的情况，我只需要添加flex-shrink: 1或flexShrink: 1, 到我想要包装的 Text 组件的父级。

我不需要或align-items: flex-start从中受益flex-wrap: wrap。同样，可能只是我的用例，但这对我有用。