如何仅为元素的顶角及顶边设置边框颜色？

针对你想要只保留容器顶边及顶部圆角边框的需求，这里提供几个实用的实现方法：

方法一：嵌套View覆盖多余边框（无第三方库） #

这是最直接的原生方案，利用内外层View的背景色重叠来隐藏不需要的边框：

// 组件结构
<View style={styles.outerContainer}>
  <View style={styles.innerContainer}>
    {/* 你的页面内容 */}
  </View>
</View>

// 样式定义
const styles = StyleSheet.create({
  outerContainer: {
    marginTop: 30,
    // 外层设置完整的边框和圆角
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    borderWidth: 2,
    borderColor: 'white',
  },
  innerContainer: {
    backgroundColor: '#0d1117', // 和外层容器要显示的背景色一致
    flex: 1,
    // 用负margin盖住左右和底部的边框，数值等于外层borderWidth
    marginLeft: -2,
    marginRight: -2,
    marginBottom: -2,
    // 顶部不设置margin，让外层的顶边边框露出来
  },
});

原理是外层拥有完整的白色边框和圆角，内层用相同背景色从内部覆盖掉左右、底部的边框，只保留顶部的边框和圆角部分。

方法二：利用borderColor数组精准控制（React Native原生特性） #

React Native支持用数组形式设置borderColor和borderWidth，分别对应[top, right, bottom, left]四个方向，我们可以把不需要的边框颜色设为和背景色一致：

container: {
  backgroundColor: '#0d1117',
  flex: 1,
  marginTop: 30,
  borderTopLeftRadius: 30,
  borderTopRightRadius: 30,
  // 四个方向的边框宽度：顶边2，左右2（保证圆角有边框），底部0
  borderWidth: [2, 2, 0, 2],
  // 四个方向的颜色：顶边、左右为白色，底部和背景色一致（隐藏）
  borderColor: ['white', 'white', '#0d1117', 'white'],
}

这个方法不需要嵌套组件，直接通过样式控制，缺点是左右边的顶部会有一小段边框，但如果你的容器高度足够，这部分几乎不明显，适合快速实现。

方法三：用SVG绘制精准边框（适合追求完美效果） #

如果需要完全隐藏左右边的任何边框，可以用react-native-svg库绘制只包含顶边和圆角的自定义边框：

1. 先安装依赖：

npm install react-native-svg
# 或者用yarn
yarn add react-native-svg

2. 组件实现：

import Svg, { Path } from 'react-native-svg';

// 组件结构
<View style={styles.container}>
  <Svg style={styles.topBorderSvg}>
    {/* 绘制顶部圆角边框，path参数根据你的圆角大小调整 */}
    <Path
      d="M0,2 
         L100%,2 
         Q100%,0 99.5%,0 
         L0.5%,0 
         Q0%,0 0%,2 
         Z"
      fill="white"
    />
  </Svg>
  {/* 你的页面内容 */}
</View>

// 样式定义
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#0d1117',
    flex: 1,
    marginTop: 30,
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    position: 'relative',
    paddingTop: 2, // 留出边框高度，避免内容被遮挡
  },
  topBorderSvg: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 2, // 边框宽度
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
  },
});

这个方法可以完全自定义边框的形状，精准控制只显示顶部的圆角和边，适合对UI细节要求高的场景。

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