mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-05 22:56:11 +00:00
b3b175a7fb
# Summary Due to the large number of example apps in the repository, I decided to change the structure and move all applications into an "apps" folder to maintain a clear structure.
66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import * as React from 'react';
|
|
import {View} from 'react-native';
|
|
import {
|
|
Circle,
|
|
RadialGradient,
|
|
Rect,
|
|
Stop,
|
|
Svg,
|
|
SvgXml,
|
|
} from 'react-native-svg';
|
|
|
|
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/r#example
|
|
const svgXml = `
|
|
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
|
|
<radialGradient r="0" id="myGradient000">
|
|
<stop offset="0" stop-color="white" />
|
|
<stop offset="100%" stop-color="black" />
|
|
</radialGradient>
|
|
<radialGradient r="50%" id="myGradient050">
|
|
<stop offset="0" stop-color="white" />
|
|
<stop offset="100%" stop-color="black" />
|
|
</radialGradient>
|
|
<radialGradient r="100%" id="myGradient100">
|
|
<stop offset="0" stop-color="white" />
|
|
<stop offset="100%" stop-color="black" />
|
|
</radialGradient>
|
|
|
|
<circle cx="50" cy="50" r="0" />
|
|
<circle cx="150" cy="50" r="25" />
|
|
<circle cx="250" cy="50" r="50" />
|
|
|
|
<rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" />
|
|
<rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
|
|
<rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
|
|
</svg>
|
|
`;
|
|
|
|
export default function App() {
|
|
return (
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
<SvgXml width={400} height={300} xml={svgXml} />
|
|
<Svg width={400} height={300}>
|
|
<RadialGradient id="a" r={0}>
|
|
<Stop offset={0} stopColor="#f00" />
|
|
<Stop offset="50%" stopColor="#0f0" />
|
|
<Stop offset="100%" stopColor="#00f" />
|
|
</RadialGradient>
|
|
<RadialGradient id="b" r="50%">
|
|
<Stop offset={0} stopColor="#f00" />
|
|
<Stop offset="100%" stopColor="#00f" />
|
|
</RadialGradient>
|
|
<RadialGradient id="c" r="100%">
|
|
<Stop offset={0} stopColor="#f00" />
|
|
<Stop offset="100%" stopColor="#00f" />
|
|
</RadialGradient>
|
|
<Rect x={0} y={100} width={100} height={100} fill="url(#a)" />
|
|
<Rect x={150} y={100} width={100} height={100} fill="url(#b)" />
|
|
<Rect x={300} y={100} width={100} height={100} fill="url(#c)" />
|
|
<Circle cx={50} cy={250} r={50} fill="url(#a)" />
|
|
<Circle cx={200} cy={250} r={50} fill="url(#b)" />
|
|
<Circle cx={350} cy={250} r={50} fill="url(#c)" />
|
|
</Svg>
|
|
</View>
|
|
);
|
|
}
|