0
523
VistasChange the color of a SVG component in React Native
I have a SVG component which is like the following:
<Svg width={svgSize} height={svgSize}>
<Defs>
<LinearGradient
x1="0%"
y1="100%"
x2="100%"
y2="0%"
id="gradient">
{
linearGradient.map((item, index) => (
<Stop
key={index}
offset={item.stop}
stopColor={item.color}
/>
))
}
</LinearGradient>
</Defs>
<Path
strokeWidth={strokeWidth}
stroke={backgroundTrackColor}
fill="none"
strokeLinecap="round"
d={`M${startPoint.x},${startPoint.y} A ${radius},${radius},0,${startRadian - openingRadian >= Math.PI ? '1' : '0'},1,${endPoint.x},${endPoint.y}`}
/>
<Path
strokeWidth={strokeWidth}
stroke="url(#gradient)"
fill="none"
strokeLinecap="round"
d={`M${startPoint.x},${startPoint.y} A ${radius},${radius},0,${startRadian - currentRadian >= Math.PI ? '1' : '0'},1,${curPoint.x},${curPoint.y}`}
/>
<Circle
cx={curPoint.x}
cy={curPoint.y}
r={buttonRadius}
fill={buttonFillColor || buttonBorderColor}
stroke={buttonBorderColor}
strokeWidth={buttonStrokeWidth}
{...this._panResponder.panHandlers}
/>
</Svg>Now, this looks like the following :
But i don't want to use LinearGradient color in this slider. I want fixed colors like this:
How can i achieve the following with fixed color?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Where is your LinearGradient component coming from?
If you use react-native-linear-gradient you can use the locations prop to assign color stops and add an extra stop for each so there's no fade, something like:
<LinearGradient
start={{x: 0.0, y: 0.0}} end={{x: 1.0, y: 1.0}}
locations={[0, 0.1, 0.1, 0.2, 0.2, 0.3, 0.3]}
colors={['#000', '#000', '#111', '#111', '#222' '#222', '#333']}
>
...
</LinearGradient>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta