React Native：如何仅使用View组件实现半圆弧形状

核心通过View的边框圆角属性即可实现，不需要引入额外的第三方库，具体实现逻辑如下：

实现原理 #

将View的宽高设置为2:1的比例，仅保留单方向边框，再将对应方向的两个圆角值设为与View高度相等，即可得到空心圆弧样式。如果需要实心半圆，直接设置背景色+对应圆角即可。

代码示例 #

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

const HalfArc = () => {
  return <View style={styles.halfArc} />;
};

const styles = StyleSheet.create({
  halfArc: {
    // 宽高比固定为2:1
    width: 200,
    height: 100,
    backgroundColor: 'transparent',
    // 圆弧颜色、厚度由顶部边框属性控制
    borderTopWidth: 8,
    borderTopColor: '#1677ff',
    // 顶部两个圆角值等于View高度，刚好形成圆弧
    borderTopLeftRadius: 100,
    borderTopRightRadius: 100,
    // 隐藏底部边框，避免多余样式
    borderBottomWidth: 0
  }
});

export default HalfArc;

样式调整规则 #

• 调整圆弧大小：保持width = 2 * height的比例，同时修改width、height和对应方向圆角的值即可
• 调整圆弧厚度：修改borderTopWidth的数值即可
• 调整圆弧朝向：需要下半圆弧就替换borderTop相关属性为borderBottom，同时修改圆角为borderBottomLeftRadius、borderBottomRightRadius，左/右半圆弧同理替换为对应方向的边框和圆角属性即可
• 调整为实心半圆：删除边框相关属性，将backgroundColor设为目标填充色即可

内容的提问来源于stack exchange，提问作者Flamingo