Flex React Native - 当内容到达边缘时如何让内容中断到下一行

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

就我而言，我只需将flex-shrink: 1 或flexShrink: 1 添加到我想要包装的Text 组件的父级。

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

Answer 2

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

如果您不指定align-items 或设置align-items: stretch，则第一行中的每一列将占据尽可能高的高度，将第二行推到下方，类似于下面的屏幕截图：