通过样式化组件在 react-native 中定义数字样式属性（border-bottom-width、height、width 等）

Question

我正在尝试使用样式化组件构建一个反应本机组件。这是片段

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

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

但是如果我在我的渲染方法中使用这个组件，我总是会得到一个错误

Invariant Violation: Invalid prop borderBottomWidth of type string supplied to StyleSheet generated, expected number. StyleSheet generated: { "borderBottomWidth": "1,", "borderColor": "#CCCCCC,", "borderStyle": "solid" }

从上面的代码可以看出，border-bottom-width等于1，是一个数值。

styled-components 是否会在后台将所有值转换为字符串？

我知道我可以使用 StyleSheet.create 来获得我需要的东西，但我也想知道是否有任何方法可以通过以下方式定义边框底部宽度、高度、宽度等属性样式组件。

如果不是，那么是否意味着在 react-native 中使用 styled-components 没有意义，因为很明显，这样的错误会一直出现？

Answer 1

我认为您必须使用 ; 而不是 , 来分隔您的值。

试试这个：

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

Answer 2

可以用更短的方式完成：

 const StyledPromocode = styled(View)`
   border-bottom: 1px solid #CCCCCC;
 `

通过样式化组件在 react-native 中定义数字样式属性（border-bottom-width、height、width 等）

Define numeric style properties (border-bottom-width, height, width and etc.) in react-native via styled components

javascript

react-native

frontend

styled-components

mobile-development