在react-native上使用样式组件，如何计算组件的高度? [英] Using styled-components on react-native, how can I calc the height of a component?

问题描述

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

Using styled components I need to calc the height of a component based on screen size, something like this:

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

使用这种方法不起作用.

Using like this doesn't work.

推荐答案

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

Styled-components does not support percentage based values on height. Use vh (percentage of height of screen) or vw (percentage of width of screen) to make it relative to screen size.

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

---

注意

根据文档 v2支持百分比

在进一步检查时，我注意到即使对于v2 +百分比，也不能在高度上工作，但可以在宽度上工作.因此，您仍然需要使用vh/vw或flex在v2 +上具有基于百分比的高度.

Upon further inspection I noticed that even for v2+ percentages do not work on height, but do work on width. So you still need to use the vh/vw or flex to have percentage based height on v2+.

进一步检查时1.4支持的宽度百分比，但不包括高度百分比.在我看来，样式化组件简直太不可思议了.

Upon even further inspection 1.4 supported percentage on width but not on height. It seems to me that styled-components is just weird.

这篇关于在react-native上使用样式组件，如何计算组件的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！