如何在 React Native 中创建自定义进度条

Question

我正在创建一个自定义进度条来显示所有结果，如图所示。我使用了多个库，例如 'react-native-pie-chart' 、 'react-native-circular-progress-indicator' 、 'react-native-circular-progress' 但未能实现相同目标。我想要最内部进度条的渐变视图和第二个内部圆圈的虚线垂直圆圈，但我没有这样做。请帮助

<View
        style={{
          overflow: 'hidden',
          width: height * 0.6,
          borderColor: Colors.light.blueColor,
          borderWidth: 0.2,
          borderRadius: height * 0.3,
          height: height * 0.6,
          alignItems: 'center',
          justifyContent: 'center',
          alignSelf: 'center',
          marginTop: height * 0.03,
        }}>
        <View
          style={{
            height: height * 0.45,
            width: height * 0.45,
            borderColor: Colors.light.blueColor,
            borderWidth: 0.5,
            borderRadius: height * 0.225,
            alignItems: 'center',
            justifyContent: 'center',
            alignSelf: 'center',
          }}>
          <View
            style={{
              height: width * 0.6,
              width: width * 0.6,
              borderColor: Colors.light.blueColor,
              borderWidth: 4,
              borderRadius: width * 0.3,
              alignItems: 'center',
              justifyContent: 'center',
              alignSelf: 'center',
              borderStyle: 'dashed',
            }}>
            <Card
              style={{
                width: width * 0.3,
                height: width * 0.3,
                borderRadius: width * 0.19,
                alignItems: 'center',
                justifyContent: 'center',
              }}
              elevation={4}
              opacity={0.2}>
              <AnimatedCircularProgress
                size={width * 0.4}
                width={10}
                fill={80}
                tintColor={Colors.light.blueColor}
                onAnimationComplete={() =>
                  console.log('onAnimationComplete')
                }
                backgroundColor={Colors.light.optionsBg}
                style={{
                  alignSelf: 'center',
                  shadowOffset: {width: 12, height: 12},
                  shadowColor:
                    Platform.OS === 'ios'
                      ? !darkTheme
                        ? Colors.light.cardOuterShadow
                        : Colors.dark.cardOuterShadow
                      : Colors.light.black,
                  shadowOpacity: 1.0,
                  shadowRadius: 18,
                  elevation: 9,
                }}>
                {fill => (
                  <Text
                    style={{fontFamily: 'GoogleSans-Bold', fontSize: 24}}>
                    90
                  </Text>
                )}
              </AnimatedCircularProgress>
            </Card>
          </View>
        </View>
      </View>