Question

问题：

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

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种颜色实现此渐变？

Answer 1

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

Answer 2

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

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

解决方法：将背景图像与本机ImageBackground组件一起使用 https://facebook.github.io/react-native/docs/imagebackground

感谢@mulsun

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

为什么不能将线性渐变与“样式化组件”一起使用？

3 个答案: