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

Posted 2023-03-07

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

【英文标题】：Flex React Native -- How to have content break to next line with flex when content reaches edge

【发布时间】：2016-04-13 21:34:15

【问题描述】：

我的样式容器中有一个图标列表，这些图标显示在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>

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

【参考方案1】：

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

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

【参考方案2】：

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

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

【讨论】：

右边的内容现在是隐藏的。它并没有结束。我需要为每一行创建一个新的 flex 容器吗？

@Chipe 例如，您可以添加align-items: flex-start，它应该可以按您的意愿工作。我编辑了我的答案。

非常感谢，成功了！有没有你推荐的学习 flex 的参考资料和教程？

@Chipe For html 我推荐 css-tricks.com/snippets/css/a-guide-to-flexbox 和 flexboxfroggy.com react-native 中的 Flexboxes 与 html flexboxes 非常相似