模拟显示：React Native 中的内联

Question

React Native 不支持 CSS display 属性，默认情况下所有元素都使用 display: flex 的行为（也没有 inline-flex ）。大多数非 flex 布局都可以使用 flex 属性进行模拟，但我对内联文本感到困惑。

我的应用程序有一个容器，其中包含多个文本中的单词，其中一些需要格式化。这意味着我需要使用 span 来完成格式化。为了实现跨度的换行，我可以将容器设置为使用 flex-wrap: wrap ，但这只会允许在跨度的末尾进行换行，而不是在分词处换行的传统内联行为。

问题可视化（以黄色显示）：

（通过 http://codepen.io/anon/pen/GoWmdm?editors=110 ）

有没有办法使用 flex 属性获得正确的包装和真正的内联模拟？

原文由 Brent Traut 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过将文本元素包装在其他文本元素中来获得此效果，就像将跨度包装在 div 或其他元素中一样：

 <View>
  <Text><Text>This writing should fill most of the container </Text><Text>This writing should fill most of the container</Text></Text>
</View>

您还可以通过在父级上声明 flexDirection:‘row’ 属性以及 flexWrap:‘wrap’ 来获得此效果。然后，孩子们将显示内联：

 <View style={{flexDirection:'row', flexWrap:'wrap'}}>
  <Text>one</Text><Text>two</Text><Text>Three</Text><Text>Four</Text><Text>Five</Text>
</View>

看看 这个 例子。

https://rnplay.org/apps/-rzWGg

原文由 Nader Dabit 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

不使用 flex 只能嵌套文本节点才能达到预期的效果。像这样： https ://facebook.github.io/react-native/docs/text

 <Text style={{fontWeight: 'bold'}}>
  I am bold
  <Text style={{color: 'red'}}>
    and red
  </Text>
</Text>

原文由 bezoerb 发布，翻译遵循 CC BY-SA 4.0 许可协议