React-Native flexWrap 不适用于 Android 上的文本

Question

有一个简单的包装视图，左侧是动态文本，右侧是静态绿色视图。我正在尝试使用 flexWrap 样式

当文本达到 2 行并变为多行

时自动将其移动到文本下方的静态绿色视图。当文本适合一行时 - 将所有文本保持在同一行。

   <View
      style={{
        flexDirection: 'row',
        flexWrap: 'wrap',
        backgroundColor: 'peach',
        justifyContent: 'space-between',
        width: 300,
      }}
    >
      <Text style={{ backgroundColor: 'powderblue', flexGrow: 1}}>{message}</Text>
      <View style={{ width: 20, height: 20, backgroundColor: 'green' }} />
    </View>

短文本案例

中间文本大小写（错误行为）

长文本案例

在Android上，文本中断逻辑使得文本视图宽度不足以触发

flexWrap

逻辑（参见第二种情况），要移动下面的绿色视图，即使里面有很多文本，它也不会填充完整宽度，因为断线。

我应该怎样做才能使所有 3 种情况保持一致？

Answer 1

<View
            style={{
              flexDirection: "row",
              flexWrap: "wrap",
              backgroundColor: "peach",
              justifyContent: "space-between",
              width: 300,
            }}
          >
            <Text style={{ backgroundColor: "powderblue", width: "100%" }}>
              Multiline snacbar message and looooooooooong
            </Text>
            <View style={{ width: 20, height: 20, backgroundColor: "green" }} />
          </View>