React Native - 证明内容不起作用

Question

我在我的 react-native 应用程序中一直在努力解决这个问题，所以我在代码和框中设置了一个非常简单的示例，您可以在此处查看：

https://codesandbox.io/s/elastic-star-5754q?file=/src/App.js

在具有绿色背景的视图中，由于“alignItems：center”样式属性，所有内部视图都在各自的空间内水平居中，正如我所期望的那样。我希望我也可以通过设置“justifyContent：center”将它们垂直居中，但这似乎对我不起作用。

我是不是从根本上误解了什么？

Answer 1

问题是您没有在各个视图中对齐文本。 您的示例错误地将内部 View 元素对齐到较大的 View 元素中，而不是对齐文本。

要在他们的视图中垂直居中对齐文本，您只需将justifyContent: "center" 添加到这三个单独的绿色视图中。

这是一个例子：https://codesandbox.io/s/recursing-kirch-n8one?file=/src/App.js:393-417

要进一步解释您遇到问题的原因，请查看此屏幕截图，其中的框概述了元素在屏幕上占用的空间：

您可以看到内部 Views 仅占用内部 text 元素所需的宽度，但使用了它们可用的最大高度。