怎么画圆环

Question

我想在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;

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

Answer 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 会有所帮助，并且总是会产生一个圆。

怎么画圆环

How to draw a circle ring

react-native

react-native-stylesheet