为什么我不能对 styled-components 使用线性渐变？

Question

问题：

当我使用 styled-components:

在 react-native 中创建具有这种样式的简单视图时

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

我收到这个错误：

Error: Failed to parse declaration "background: linear-gradient(#006ded 0%, #1bace2 34.48%, #00e2ed 100%)"

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

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

Answer 1

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

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

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

谢谢@mulsun 的信息

Answer 2

我通过创建一个 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);
    }
`

Answer 3

使用属性属性

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 */
`;

为什么我不能对 styled-components 使用线性渐变？

Why can't I use a linear gradient with `styled-components`?

css

gradient

styled-components