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

Question

问题：

当我在react-native中创建一个具有这种样式的简单视图时，使用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

使用属性属性

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

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

Answer 2

不支持。您可以在这里找到确认信息：

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

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

感谢您提供信息@mulsun