0
516
VistasCambiar el color de un componente SVG en React Native
Tengo un componente SVG que es como el siguiente:
<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>Ahora, esto se parece a lo siguiente:
Pero no quiero usar el color LinearGradient en este control deslizante. Quiero colores fijos como este:
¿Cómo puedo lograr lo siguiente con un color fijo?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
¿De dónde viene su componente LinearGradient ?
Si usa react-native-linear-gradient , puede usar el apoyo de locations para asignar paradas de color y agregar una parada adicional para cada una para que no se desvanezca, algo así como:
<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