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.
28 lines
1.0 KiB
TypeScript
28 lines
1.0 KiB
TypeScript
import React, {useState} from 'react';
|
|
import {Button, View} from 'react-native';
|
|
import {Circle, Svg} from 'react-native-svg';
|
|
|
|
export default () => {
|
|
const [strokeWidth, setStrokeWidth] = useState<undefined | number>(undefined);
|
|
return (
|
|
<View>
|
|
<Svg viewBox="0 0 30 10" width={400} height={200}>
|
|
<Circle cx="5" cy="5" r="3" stroke="green" />
|
|
<Circle cx="15" cy="5" r="3" stroke="green" strokeWidth="3" />
|
|
<Circle cx="25" cy="5" r="3" stroke="green" strokeWidth="2%" />
|
|
</Svg>
|
|
<Button
|
|
title="stroke: undefined"
|
|
onPress={() => setStrokeWidth(undefined)}
|
|
/>
|
|
<Button title="stroke: 0" onPress={() => setStrokeWidth(0)} />
|
|
<Button title="stroke: 1" onPress={() => setStrokeWidth(1)} />
|
|
<Button title="stroke: 2" onPress={() => setStrokeWidth(2)} />
|
|
<Svg viewBox="0 0 30 10" width={400} height={200}>
|
|
<Circle cx="5" cy="5" r="3" stroke="green" strokeWidth={strokeWidth} />
|
|
<Circle cx="10" cy="5" r="3" stroke="green" />
|
|
</Svg>
|
|
</View>
|
|
);
|
|
};
|