出于某种原因,在容器视图的样式中设置alignItems: center
会导致flex行中的文本停止换行,并且不遵守容器视图的padding
。
示例和代码如下:https://rnplay.org/apps/FsDXuQ
我试着按照set flexDirection to column,use flex: 1 or flexWrap的建议,但唯一有效的是从容器视图中删除alignItems: center
。
我不明白这是怎么回事。如果我想要:
1.行元素,它们不会占据屏幕的整个宽度,
1.居中
1.里面有很长的文字
1.哪个 Package ?
- 谢谢-谢谢
4条答案
按热度按时间rur96b6h1#
使用
flex
属性。例如<Text style={{ flex: 1}}>
mspsb9vt2#
我们在我的公司遇到了同样的问题,据我所知,没有非黑客的方法。
我们处理它的方式是从主容器中完全删除alignItems属性,并为容器提供一个flex:1属性。然后我们使用alignItems:'center'到我们需要的任何子组件,而不会将样式传播到所有子组件。
我已经建立了一个关于here的例子,并将代码粘贴在下面。
字符串
ldfqzlk83#
我一直在寻找自己的方法来解决这个问题:
字符串
这篇文章的礼貌:http://moduscreate.com/aligning-children-using-flexbox-in-react-native/
删除直接父节点中的任何
alignItems
,以允许flexWrap发生。fwzugrvs4#
我发现我必须做的比@trik指示的多一点。
我还删除了alignItems:从容器(父组件)中“中心”。
我还发现,如果我需要容器使用alignItems:'center',然后我必须设置我的子组件的宽度足够大,以容纳文本以及使用textAlign:中心
这将使用类似于以下的样式:
字符串
**额外提示:**如果将文本组件的背景设置为对比色,则可以看到文本组件的框。这使得调试这些问题更容易。