react-native-svg的学习01

参考资料：
https://github.com/react-native-svg/react-native-svg#circle
https://blog.csdn.net/z372574152/article/details/105465250
https://www.jianshu.com/p/e4d696af9ae4
https://www.lmlphp.com/user/64152/article/item/2096746/

实现自定义的圆形进度条：
效果如下：

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    ScrollView,
    Animated,
    Easing,
} from 'react-native';
import Svg, { Circle, G, Path, Rect } from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

export default class MyCirlceProgress extends React.Component {


    svgSize = 0;
    strokeWidth = 0;

    halfOfSvgSize = 0;
    circleRadius = 0;

    constructor(props) {
        super(props);
        this.svgSize = this.props.svgSize ?? 100;//圆的大小
        this.strokeWidth = this.props.strokeWidth ?? 5;//圆的边框大小

        this.halfOfSvgSize = this.svgSize / 2;
        this.circleRadius = this.halfOfSvgSize - this.strokeWidth;//圆的半径

        this.state = {
            progress: 0.5,
        }

        this.animatedValue = new Animated.Value(0);
    }

    componentDidMount() {
        Animated.timing(this.animatedValue, {
            toValue: 1,
            easing: Easing.linear,
            duration: 2000,
            useNativeDriver: true
        }).start();
    }

    render() {
        const { progress } = this.state;
        const circumference = 100 * Math.PI; // 总周长
        const strokeDashoffset = circumference - progress * circumference;

        const strokeOffsetValue = this.animatedValue.interpolate({
            inputRange: [0, 1],
            outputRange: [circumference, progress * circumference],
        })

        const outerCircleCommonConfig = {
            fill: 'none',  // 填充色为空
            cx: this.halfOfSvgSize,  // 圆心x坐标值（相对于Svg画布）
            cy: this.halfOfSvgSize,  // 圆心y坐标值（相对于Svg画布）
            r: this.circleRadius,  // 圆半径
            strokeWidth: this.strokeWidth,  // 圆边框宽度
            strokeDasharray: `${circumference} ${circumference}`  // 绘制圆边点划线的图案范式，说白了就是定义虚线的渲染形式，circumference是整个圆的周长
        };

        return <View>
            <View style={{
                width: this.svgSize, height: this.svgSize,
                backgroundColor: 'green',
                margin: 10,
                overflow: 'visible'
            }}>
                <Svg height={this.svgSize} width={this.svgSize}>
                    <G origin={`${this.halfOfSvgSize}, ${this.halfOfSvgSize}`}>
                        <Circle
                            stroke={"#eee"}
                            {...outerCircleCommonConfig} />
                        <AnimatedCircle
                            stroke={"#f00"}
                            strokeLinejoin={"round"}
                            stroke-linecap={"round"}
                            strokeDashoffset={strokeOffsetValue}
                            {...outerCircleCommonConfig}
                            transform={`rotate(-90, ${this.halfOfSvgSize}, ${this.halfOfSvgSize})`}
                        />
                    </G>
                </Svg>
            </View>
        </View>

    }
}

关于svg的基本组件了解：
常用模块:

类型 描述
Svg 承载绘图区域
Circle 圆
Ellipse 椭圆
G 包裹块(个人认为是为了单纯的层次分明)
LinearGradient 线性渐变,可以做颜色的线性渐变效果
RadialGradient 角度渐变,可以做颜色的角度渐变效果
Line 线条
Polyline 多段线
Path 路径,类似的还有ClipPath
Polygon 多边形
Rect 矩形
Symbol 定义个视图模块,其他地方可以随意使用该模块(可以通过id标示)
Use 可以获取到Symbol视图模块使用(可以通过href找到模块)
Text 文字信息
TSpan 多行文字
TextPath 文字路径
Defs 个人觉得怎么和G标签一样啊.就像前端中的div一样
Stop 效果停止位置
属性大致有:

类型 描述
fill 填充颜色
fillOpacity 填充透明度
fillRule 填充规则
stroke 外边框属性,可以定义颜色
strokeWidth 外边框宽度
strokeOpacity 外边框透明度
strokeLinecap
strokeLinejoin
strokeDasharray
strokeDashoffset
x x
y y
cx cy r 定义圆的中心,如果省略了cx和cy，那么圆的中心将被设置为(0,0),r圆的半径
rx ry 定义水平半径 垂直半径
x1 y1 x2 y2 x1:x轴的开始位置 x2:x轴的结束位置 y1:y轴开始位置 y2:y轴结束位置 (通常用于Line模块)
points 多边形的每个角的x和y坐标.(通常用于Polygon模块,几个角就是几边形)
rotate 旋转角度
scale 比例
origin 原点
originX 原点x
originY 原点y
具体参考这个网址使用：https://github.com/react-native-svg/react-native-svg#circle