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

问题描述

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

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.

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

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):

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

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

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

推荐答案

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

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>

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

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>

查看这个示例.

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

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