Определите числовые свойства стиля (border-bottom-width, height, width и т. Д.) В реагирующем через стилизованные компоненты - PullRequest
Новая
       30

Определите числовые свойства стиля (border-bottom-width, height, width и т. Д.) В реагирующем через стилизованные компоненты

0 голосов
/ 25 апреля 2019

Я пытаюсь построить реактивный компонент, используя стилизованные компоненты. Вот фрагмент 

import { View } from 'react-native'
import styled from 'styled-components'

const StyledPromocode = styled(View)`
  border-bottom-width: 1,
  borderColor: #CCCCCC,
  borderStyle: solid
`

Но если я использую этот компонент в моем методе рендеринга, я всегда получаю ошибку

Инвариантное Нарушение: Недопустимая опора borderBottomWidth типа string поставлено на StyleSheet generated, ожидается number. Создана таблица стилей: { "borderBottomWidth": "1,", "borderColor": "#CCCCCC",, "borderStyle": "solid" }

Как видно из приведенного выше кода, border-bottom-width равняется 1, что является числовым значением.

Преобразуют ли стилизованные компоненты все значения в строку под капотом?

Я знаю, что могу использовать StyleSheet.create, чтобы получить то, что мне нужно, но я также хотел бы знать, есть ли способ определить свойства, такие как border-bottom-width, height, width и т. Д., С помощью styled-компонентов.

Если нет, то означает ли это, что не имеет смысла использовать стилевые компоненты в реагирующем, потому что, очевидно, что подобные ошибки будут появляться постоянно?

1 Ответ

0 голосов
/ 25 апреля 2019

Я думаю, что вы должны разделить ваши значения с ; вместо ,.

Попробуйте это: 

const StyledPromocode = styled(View)`
  border-bottom-width: 1;
  borderColor: #CCCCCC;
  borderStyle: solid;
`
...