在 react-native 上使用 styled-components，如何计算组件的高度？

【问题标题】：Using styled-components on react-native, how can I calc the height of a component?在 react-native 上使用 styled-components，如何计算组件的高度？
【发布时间】：2021-03-16 01:10:18
【问题描述】：

使用样式组件我需要根据屏幕大小计算组件的高度，如下所示：

const ForgotPasswordContainer = styled.View`
   height: calc(100% - 20px);
`;

这样使用是行不通的。

【问题讨论】：

标签： css react-native styled-components

【解决方案1】：

Styled-components 不支持基于高度的百分比值。使用 vh（屏幕高度百分比）或 vw（屏幕宽度百分比）使其相对于屏幕尺寸。

const ForgotPasswordContainer = styled.View`
    height: calc(100vh - 20px);
`;

注意

根据docs v2支持百分比

编辑

经过进一步检查，我注意到即使对于 v2+ 百分比也不能用于高度，但可以用于宽度。所以你仍然需要使用 vh/vw 或 flex 在 v2+ 上获得基于百分比的高度。

编辑#2

进一步检查后，1.4 支持宽度百分比但不支持高度。在我看来，styled-components 很奇怪。

【讨论】：