react-native-svg实现渐变边框矩形

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>
}