将 flexDirection 设置为行时反应原生文本关闭视图答案

【问题标题】：react native text go off view when set flexDirection to row将 flexDirection 设置为行时反应原生文本关闭视图
【发布时间】：2019-12-03 12:51:17
【问题描述】：

视图内的文本组件，flexDirection 设置为行文本离开视图。

我尝试设置 flexWrap 来换行，但它仍然无法正常工作。

const tags = [
  { name: "condition", value: "99%" },
  { name: "cashback", value: "10%" },
  { name: "discount", value: "10%" }
];

<View style={{ flexDirection: "row" }}>
  {tags.map((tag, i) => (
    <View
      key={i}
      style={{
        backgroundColor: "#FFECEC",
        padding: 3,
        borderRadius: 3,
        marginRight: 3,
        flexWrap: "wrap"
      }}
    >
      <Text
        style={{
          fontSize: 12,
          color: Theme.Primary,
        }}
      >
        {`${tag.name.toUpperCase()} ${tag.value}`}
      </Text>
    </View>
  ))}
</View>

我希望最后一个元素进入第二行，但它只是离开了屏幕。

text go off view

【问题讨论】：

标签： react-native

【解决方案1】：

您是否尝试在父视图上设置flexWrap: "wrap"，例如：style={{ flexDirection: "row", flexWrap: "wrap" }}？

否则这是一篇关于这个主题的好文章：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：