模拟显示: React Native中的内联
React Native不支持CSS display属性，默认情况下所有元素都使用display: flex的行为(也没有inline-flex )。大多数非flex布局都可以用flex属性来模拟，但我对内联文本感到不安。
我的应用程序有一个容器，其中包含文本中的几个单词，其中一些需要格式化。这意味着我需要使用span来完成格式化。为了实现跨度的换行，我可以将容器设置为使用flex-wrap: wrap，但这将只允许在跨度的末尾换行，而不是传统的在断字符处换行的内联行为。
可视化的问题(以黄色显示)：
(通过http://codepen.io/anon/pen/GoWmdm?editors=110)
有没有一种方法可以使用flex属性获得正确的包装和真正的内联模拟？
回答 5
Stack Overflow用户
发布于 2016-01-06 10:56:27
您可以通过在其他文本元素中包装文本元素来获得此效果，就像在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>查看this示例。
Stack Overflow用户
发布于 2018-08-31 05:26:10
您只能嵌套文本节点，而不能使用flex来获得所需的效果。像这样：https://facebook.github.io/react-native/docs/text
<Text style={{fontWeight: 'bold'}}>
I am bold
<Text style={{color: 'red'}}>
and red
</Text>
</Text>Stack Overflow用户
发布于 2018-03-15 03:14:39
我还没有找到一种合适的方法来内联文本块和其他内容。我们目前的"hackish“解决方法是将文本字符串中的每个单词拆分到它自己的块中，这样flexWrap就可以正确地对每个单词进行包装。
https://stackoverflow.com/questions/34624100
复制相似问题