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

Question

使用样式化组件，我需要根据屏幕尺寸计算组件的高度，如下所示:

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

这样使用是行不通的。

Answer 1

样式组件不支持基于百分比的高度值。使用 vh(屏幕高度的百分比)或 vw(屏幕宽度的百分比)使其相对于屏幕尺寸。

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

---

注意

根据docs v2支持百分比

---

编辑

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

---

编辑 #2

经过进一步检查，1.4 支持宽度百分比，但不支持高度百分比。在我看来，样式组件很奇怪。