alignItems：center阻止React Native中的flex行文本换行 [英] alignItems: center prevents flex row text wrapping in React Native

问题描述

出于某种原因，在容器视图的样式中设置 alignItems：center 会导致弹性行内的文本停止换行，并且不尊重容器视图的 padding 。

For some reason, setting alignItems: center in the style on the container view causes text inside a flex row to stop wrapping, and to not respect the container view's padding.

这里的工作示例和代码： https://rnplay.org/apps/FsDXuQ

Working example and code here: https://rnplay.org/apps/FsDXuQ

我尝试按照将flexDirection设置为列，使用flex：1或flexWrap 但唯一有效的方法是从容器视图中删除 alignItems：center 。

I tried following the advice to set flexDirection to column, use flex: 1 or flexWrap but the only thing that works is removing the alignItems: center from the container view.

我不明白这里发生了什么。如果我想要怎么做：

I don't understand what's going on here. What if I want:

1. 行元素，不占用屏幕的整个宽度，


2. 居中，


3. 里面有长文字，


4. 哪个包裹？

1. Row elements, which don't take up the full width of the screen,
2. Centered,
3. With long text inside them,
4. Which wraps?

谢谢。

推荐答案

使用 flex 财产。例如<文字样式= {{flex：1}}>

这篇关于alignItems：center阻止React Native中的flex行文本换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！