如何在 React Native 中绘制多颜色的圆圈？

Question

我想画这个形状。当然，还可以分为更多部分。

我如何使用StyleSheet绘制它？

或者我需要使用一些库，例如react-native-svg？

如果有人能帮助我，我将不胜感激。

先感谢您！

Answer 1

我找到了一个解决方案。

样式表

  outerCircle: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
    width: 42,
    height: 42,
    borderRadius: 21
  },
  innerCircle: {
    overflow: 'hidden',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
    width: 34,
    height: 34,
    borderRadius: 17
  },
  leftWrap: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: 21,
    height: 42
  },
  halfCircle: {
    position: 'absolute',
    top: 0,
    left: 0,
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
    width: 21,
    height: 42,
    borderRadius: 21
  },

看法

        <View style={[styles.outerCircle, { backgroundColor: color1 }]}>
          <View style={styles.leftWrap}>
            <View
              style={[
                styles.halfCircle,
                {
                  backgroundColor: color2,
                  transform: [
                    { translateX: 21 / 2 },
                    { rotate: '180deg' },
                    { translateX: -21 / 2 },
                  ],
                },
              ]}
            />
          </View>
          <View style={styles.innerCircle} />
        </View>

这适用于 2 分区，但不适用于 3 分区。

下面是3分法的代码和截图。

        <View style={[styles.outerCircle, { backgroundColor: color1 }]}>
          <View style={styles.leftWrap}>
            <View
              style={[
                styles.halfCircle,
                {
                  backgroundColor: color2,
                  transform: [
                    { translateX: 21 / 2 },
                    { rotate: '180deg' },
                    { translateX: -21 / 2 },
                  ],
                },
              ]}
            />
          </View>

          <View style={styles.leftWrap}>
            <View
              style={[
                styles.halfCircle,
                {
                  backgroundColor: color2,
                  transform: [
                    { translateX: 21 / 2 },
                    { rotate: '90deg' },
                    { translateX: -21 / 2 },
                  ],
                },
              ]}
            />
          </View>
          <View style={styles.innerCircle} />
        </View>

我想分成长度相同的3部分。我尝试了几次，但没有成功。:(