React Native不支持CSS display
属性,默认情况下所有元素都使用display: flex
的行为(也没有inline-flex
)。大多数非flex布局都可以用flex属性来模拟,但我对内联文本感到不安。
我的应用程序有一个容器,其中包含文本中的几个单词,其中一些需要格式化。这意味着我需要使用span来完成格式化。为了实现跨度的换行,我可以将容器设置为使用flex-wrap: wrap
,但这将只允许在跨度的末尾换行,而不是传统的在断字符处换行的内联行为。
可视化的问题(以黄色显示):
(通过http://codepen.io/anon/pen/GoWmdm?editors=110)
有没有一种方法可以使用flex属性获得正确的包装和真正的内联模拟?
发布于 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示例。
发布于 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>
发布于 2018-03-15 03:14:39
我还没有找到一种合适的方法来内联文本块和其他内容。我们目前的"hackish“解决方法是将文本字符串中的每个单词拆分到它自己的块中,这样flexWrap就可以正确地对每个单词进行包装。
https://stackoverflow.com/questions/34624100
复制相似问题