模拟显示：在React Native中内联 [英] Simulate display: inline in React Native

问题描述

React Native不支持CSS display 属性，默认情况下所有元素都使用 display：flex （no inline-flex ）。大多数非flex的布局可以使用flex属性进行模拟，但是我内心充满了内联文本。

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

可视化的问题（跨越黄色）：

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

有没有一种方法可以正确包装和真正的内联模拟使用flex属性？

解决方案

您可以通过以其他文本元素包装文本元素在一个div或其他元素中包含一个span：

 < View> 
< Text>< Text>这篇文章应该填充大部分的容器< / Text>< / Text> 
< / View> 
  

您也可以通过声明一个flexDirection：parent属性flexWrap：'wrap'。然后，孩子将显示内联：

 < View style = {{flexDirection：'row'，flexWrap：'wrap'} }> 
< Text> one< / Text>< Text> two< Text>< Text> Three< / Text>< Text> Four< / Text>< 
< / View> 
  

查看这个例子。

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

React Native doesn't support the CSS display property, and by default all elements use the behavior of display: flex (no inline-flex either). Most non-flex layouts can be simulated with flex properties, but I'm flustered with inline text.

My app has a container that contains several words in text, some of which need formatting. This means I need to use spans to accomplish the formatting. In order to achieve wrapping of the spans, I can set the container to use flex-wrap: wrap, but this will only allow wrapping at the end of a span rather than the traditional inline behavior of wrapping at word breaks.

The problem visualized (spans in yellow):

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

Is there a way to get proper wrapping and true inline simulation using flex properties?

解决方案

You can get this effect by wrapping text elements in other text elements the way you would wrap a span in a div or another element:

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

You can also get this effect by declaring a flexDirection:'row' property on the parent along with a flexWrap: 'wrap'. The children will then display inline:

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

Check out this example.

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

这篇关于模拟显示：在React Native中内联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！