css - 模拟显示: inline in React Native

Question

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

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

可视化的问题(跨度为黄色):

(通过 http://codepen.io/anon/pen/GoWmdm?editors=110 )

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

Answer 1

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

<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' 来获得此效果。然后 children 将内联显示:

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

查看 this示例。

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