如何画一个圆环答案

【问题标题】：How to draw a circle ring如何画一个圆环
【发布时间】：2020-11-23 16:42:59
【问题描述】：

我想在 react-native 项目中画一个圆环。我希望圆环组件在使用时可以自定义其大小。这是我尝试过的：

import React from 'react';
import {View, StyleSheet, TouchableOpacity} from 'react-native';

const Ring = ({size}) => {
  return (
      <View
        style={[styles.circle, {width: size, height: size}]}
      />
  );
};

const styles = StyleSheet.create({
  circle: {
    width: 100,
    height: 100,
    borderRadius: 50,
    borderWidth: 15,
    borderColor: 'blue',
  },
});

export default Ring;

当我使用我的Ring 组件时，像这样：

const MyScreen = () => {
  return (
    <TouchableOpacity>
      <View style={styles.container}>
        <Ring size={6} />
        <Text>XYZ</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    paddingVertical: 17,
    paddingHorizontal: 36,
  },
});
export default MyScreen;

但它显示的是实心圆而不是环形。我怎样才能有一个圆环？

【问题讨论】：

减少它应该工作的边框宽度
不，它没有。试过了。减小borderWidth 只会显示更小的实心圆。
我将大小改为 20 并且它起作用了，snack.expo.io/9CquoYZ09
好的，你说20 用于上面的borderWidth，这就是它不起作用的原因。我更改为2 它有效。谢谢！
是的，它有效。谢谢。你可以给出答案。

标签： react-native react-native-stylesheet

【解决方案1】：

您遇到的问题是borderWidth 的值较高。您可以更改如下样式

  circle: {
    width: 100,
    height: 100,
    borderRadius: 50,
    borderWidth: 2,
    borderColor: 'blue',
  },

或者为 borderWidth 和其他类似下面的值设置一个动态值

const Ring = ({ size }) => {
  return (
    <View
      style={[
        styles.circle,
        {
          width: size,
          height: size,
          borderRadius: size / 2,
          borderWidth: (size * 5) / 100,
        },
      ]}
    />
  );
};

当大小超过 50 时，计算 boderRadius 会有所帮助，并且总是会产生一个圆。

【讨论】：