React Native Expo实现圆形边框透明度渐变问题求助

一、SVG修正方案 #

你之前的SVG使用了径向渐变，导致边框透明度从中心向外扩散，而非沿边框路径渐变。以下是两种符合需求的SVG实现：

1. 全边框线性渐变（从实色到透明） #

<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="borderGradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(90, 48, 48)" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#7633FF" stop-opacity="1"/>
      <stop offset="100%" stop-color="#7633FF" stop-opacity="0"/>
    </linearGradient>
  </defs>
  <path 
    d="M48 8C70 8 88 26 88 48C88 70 70 88 48 88C26 88 8 70 8 48C8 26 26 8 48 8Z" 
    stroke="url(#borderGradient)" 
    stroke-width="2.5" 
    stroke-linecap="round" 
    stroke-linejoin="round"
  />
</svg>

2. 部分边框渐变消失（实色到透明过渡） #

通过stroke-dasharray控制显示的边框长度，配合渐变实现局部透明效果：

<svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="borderGradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#7633FF" stop-opacity="1"/>
      <stop offset="100%" stop-color="#7633FF" stop-opacity="0"/>
    </linearGradient>
  </defs>
  <path 
    d="M48 8C70 8 88 26 88 48C88 70 70 88 48 88C26 88 8 70 8 48C8 26 26 8 48 8Z" 
    stroke="url(#borderGradient)" 
    stroke-width="2.5" 
    stroke-linecap="round" 
    stroke-linejoin="round"
    stroke-dasharray="180 71"
    stroke-dashoffset="0"
  />
</svg>

二、expo-linear-gradient实现方案 #

使用嵌套View实现渐变边框，外层用渐变背景，内层挖空露出边框：

import { View } from 'react-native';
import LinearGradient from 'expo-linear-gradient';

const GradientBorderCircle = () => {
  return (
    <LinearGradient
      colors={['#7633FF', 'rgba(118, 51, 255, 0)']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      style={{
        width: 96,
        height: 96,
        borderRadius: 48,
        padding: 2.5, // 边框厚度
      }}
    >
      <View
        style={{
          flex: 1,
          borderRadius: 48,
          backgroundColor: '#ffffff', // 与页面背景色一致
        }}
      />
    </LinearGradient>
  );
};

export default GradientBorderCircle;

• 调整start和end属性可以改变渐变方向，比如垂直渐变设置start={{x:0.5, y:0}}、end={{x:0.5, y:1}}
• 修改colors数组可以自定义渐变的颜色和透明度节点

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