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

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

可视化的问题(以黄色显示):

enter image description here

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

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

推荐答案

通过在其他文本元素中包装文本元素,可以获得这种效果,就像在div或其他元素中包装span一样:

<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个例子.

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

Css相关问答推荐

无法瞄准元素

如何从 WooCommerce 中的 Betheme 图像中删除产品永久链接图标

是否可以在元素之间对齐渐变?

使用 Flex 容器,如何在右对齐所有 Flex 子项的同时赋予子图像完整宽度?

如何在不使用 sx props 的情况下从 Select 样式中定位 mui paper 组件?

Bootstrap 和 Sass:将 SCSS 文件转换为 CSS 时出错.错误:$theme-colors-rgb 中未定义变量 @each $color、$value

如何在一个父类里面 Select 两个不同的类?

当值小于 1 时理解 flex-shrink

我怎样才能准确地获得虚构文本内容宽度的边距?

如何在保持默认外观的同时更改 javaFX 中按钮的突出显示 colored颜色

在不使用 position: fixed 的情况下从 CSS 网格中的自动布局中免除子元素?

semantic-ui-react 使输入使用全宽度可用

为什么这个绝对定位的 ::after 伪元素会崩溃,除非父级有过滤器?

如何在父叠加层之上呈现子子

如何让我的 CSS 代码响应小屏幕?

我无法覆盖 react ui 库中的组件样式

内联块在 Internet Explorer 7、6 中不起作用

flex-wrap 如何与 align-self、align-items 和 align-content 一起使用?

bootstrap.css 和 bootstrap-theme.css 有什么区别?

堆叠半透明盒子的 colored颜色 取决于订单?