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

【问题标题】：Define numeric style properties (border-bottom-width, height, width and etc.) in react-native via styled components通过样式化组件在 react-native 中定义数字样式属性（border-bottom-width、height、width 等）
【发布时间】：2019-09-14 18:24:24
【问题描述】：

我正在尝试使用样式化组件构建一个 react-native 组件。这是sn-p

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,", “边框样式”：“实心” }

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

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

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

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

【问题讨论】：

标签： javascript react-native frontend styled-components mobile-development

【解决方案1】：

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

试试这个：

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

【讨论】：

【解决方案2】：

可以用更短的方式完成：

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

【讨论】：