为什么我不能使用带有 `styled-components` 的线性渐变？答案

【问题标题】：Why can't I use a linear gradient with `styled-components`?为什么我不能使用带有 `styled-components` 的线性渐变？
【发布时间】：2019-09-25 20:49:54
【问题描述】：

问题：

当我使用 styled-components 在 react-native 中创建具有这种样式的简单视图时：

const Container = styled.View`
  flex: 1;
  background: linear-gradient(#006ded 0%, #1bace2 34.48%, #00e2ed 100%);
`;

我收到此错误：

错误：无法解析声明“背景：线性渐变（#006ded 0%，#1bace2 34.48%，#00e2ed 100%）”

这不是对线性渐变的正确使用吗？我有一个朋友的设计文件，只是复制了 css 代码。我不得不承认我的 css 不是很好，但我在 mozilla 文档上查找了它。好像语法不正确？

如何使用 3 种颜色实现这种渐变？

【问题讨论】：

好像不支持：github.com/styled-components/styled-components/issues/1170
很遗憾你是对的。比你那我会用它作为背景图片。

标签： css gradient styled-components

【解决方案1】：

使用属性属性

import LinearGradient from 'react-native-linear-gradient'

export const Background = styled(LinearGradient).attrs({
 colors: ['#000','#fff'],
 start: { x: 0, y: 0 },
 end: { x: 1, y: 0 },
})`
 /* your css here */
`;

【讨论】：

【解决方案2】：

不支持。您可以在此处找到确认信息：

https://github.com/styled-components/styled-components/issues/1170

解决方法：使用带有 react-native ImageBackgroundcomponent 的背景图片 https://facebook.github.io/react-native/docs/imagebackground

感谢@mulsun 提供的信息

【讨论】：

【解决方案3】：

我通过创建一个名为 overlay 的 div 并将其设置在包装器上并操纵其不透明度来欺骗

export const Wrapper = styled.div`
    width: 100vw;
    height: 100vh;
    background-image:url(${BKHero}); 
    background-position:top;
    background-size:cover;
    .overlay  {
        width:100vw;
        height:100vh;
        background:rgba(333, 444, 331, 0.4);
    }
`

【讨论】：

问题是要求 React Native，而不是 ReactJS