我想画这个形状。当然也可以分成更多的部分。
如何使用 StyleSheet 绘制它？
或者我是否需要使用一些库，例如 react-native-svg ？
如果有人能帮助我，我将不胜感激。
提前致谢!
最佳答案
我找到了解决方案。
样式表
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>
我想分成三个相同长度的部分。我试了几次，没有运气。 :(
关于javascript - 如何在 React Native 中绘制多色圆圈？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47418833/