模拟显示:在React Native中内联

React Native不支持CSS display属性,默认情况下所有元素都使用display: flex(no no inline-flex)的行为.大多数非flex布局都可以使用flex属性进行模拟,但我对内联文本感到慌乱.

我的应用程序有一个容器,其中包含几个文本单词,其中一些需要格式化.这意味着我需要使用跨度来完成格式化.为了实现跨度的包装,我可以设置要使用的容器flex-wrap: wrap,但这只允许在跨度结束时进行换行,而不是在单词中断时包装的传统内联行为.

问题可视化(跨黄色):

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

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

您可以通过将文本元素包装在div或其他元素中的跨度的方式来包装其他文本元素来获得此效果:

  This writing should fill most of the container This writing should fill most of the container       

您还可以通过在父项上声明flexDirection:'row'属性以及flexWrap:'wrap'来获得此效果.然后孩子们将内联显示:

  onetwoThreeFourFive

看看这个例子.

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

您只能嵌套文本节点，而不能使用flex获得所需的效果。像这样：https : //facebook.github.io/react-native/docs/text

  I am bold
  
    and red