Блог

Главная - Вопросы по программированию - Используя styled-components на react-native, как я могу вычислить высоту компонента?

Используя styled-components на react-native, как я могу вычислить высоту компонента?

#css #react-native #styled-components

#css #react-native #styled-components

Вопрос:

Используя styled components, мне нужно вычислить высоту компонента в зависимости от размера экрана, что-то вроде этого:

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

Подобное использование не работает.

Ответ №1:

Styled-components не поддерживает процентные значения высоты. Используйте vh (процент от высоты экрана) или vw (процент от ширины экрана), чтобы сделать его относительно размера экрана.

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

Примечание

Согласно документам v2 поддерживает проценты

Редактировать

После дальнейшей проверки я заметил, что даже для v2 проценты не работают по высоте, но работают по ширине. Итак, вам все равно нужно использовать vh / vw или flex, чтобы иметь высоту в процентах для v2 .

Редактирование # 2

При дальнейшей проверке 1.4 поддерживается процент по ширине, но не по высоте. Мне кажется, что styled-components просто странно.