如何在React Native中用CSS实现带橙色边框的菱形？

给你两种简单可行的实现方式，按需选择：

方法一：用View配合旋转和边框实现 #

这是最基础的方案，无需额外依赖：

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

const DiamondBorder = () => {
  return (
    <View style={styles.container}>
      <View style={styles.diamond} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    // 设置菱形实际显示尺寸
    width: 200,
    height: 200,
    overflow: 'hidden',
  },
  diamond: {
    width: '100%',
    height: '100%',
    borderWidth: 2,
    borderColor: '#ff7f24', // 橙色边框色值
    transform: [{ rotate: '45deg' }],
  },
});

export default DiamondBorder;

• 外层容器控制菱形大小，overflow: hidden 裁剪旋转后超出的部分
• 内层View通过旋转45度形成菱形，设置橙色边框即可
• 若需要填充内部颜色，给内层View添加backgroundColor属性即可

方法二：用SVG实现（更灵活） #

如果需要精准控制形状或扩展复杂样式，可选择SVG方案：

首先安装依赖：

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

实现代码：

import React from 'react';
import { View } from 'react-native';
import Svg, { Polygon } from 'react-native-svg';

const DiamondSvg = () => {
  return (
    <View style={{ width: 200, height: 200 }}>
      <Svg width="100%" height="100%">
        <Polygon
          points="100,0 200,100 100,200 0,100" // 对应200x200容器的四个顶点
          stroke="#ff7f24"
          strokeWidth="2"
          fill="transparent" // 透明填充，仅显示边框
        />
      </Svg>
    </View>
  );
};

export default DiamondSvg;

• 通过Polygon标签定义菱形四个顶点坐标，精准控制形状
• stroke设置边框颜色，strokeWidth设置边框粗细，fill设为透明仅展示边框

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