import { StyleSheet, View } from "react-native";
import Svg, { LinearGradient, Rect, Stop } from "react-native-svg";
/**
* 带有渐变背景颜色、渐变边框
*/
export function LinearView({
startColor = "#23040d",
endColor = "#0e1f22",
borderStartColor = "#FF1652",
borderEndColor = "#24F4ED",
bgColorX2 = "100%",
bgColorY2 = "100%",
lineColorX1 = "0",
lineColorY1 = "0",
lineColorX2 = "100%",
lineColorY2 = "100%",
cornerRadius = 16,
}) {
return <View style={[StyleSheet.absoluteFill, { overflow: 'hidden' }]}>
<Svg style={{ width: "100%", height: "100%" }}>
<LinearGradient id="gradient" x1="0" y1="0" x2={bgColorX2} y2={bgColorY2}>
<Stop offset="0" stopColor={startColor} />
<Stop offset="1" stopColor={endColor} />
</LinearGradient>
<LinearGradient id="line" x1={lineColorX1} y1={lineColorY1} x2={lineColorX2} y2={lineColorY2}>
<Stop offset="0" stopColor={borderStartColor} />
<Stop offset="1" stopColor={borderEndColor} />
</LinearGradient>
<Rect width={"100%"}
height={"100%"}
fill={"url(#gradient)"}
stroke={"url(#line)"}
strokeWidth={1}
strokeOpacity={0.5}
strokeLinejoin="miter"
strokeLinecap="square"
x={0}
y={0}
rx={cornerRadius}//圆角大小
ry={cornerRadius}
/>
</Svg>
</View>
}
react-native-svg实现渐变边框矩形
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 安装 安装之后运行react-native run-android可能会报错，比如说我会报一个cannot del...
- 1、安装： npm install react-native-linear-gradient --save（或 y...
- 一、使矩形边框产生动画需要使用ColorAnimation，并且要注意，要给需要添加动画的属性（这里是Stroke...
