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个部分。我试了好几次，没有运气。：（

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

1 个答案: