如何在React Native中实现弧形边框与弧形线性渐变效果

不用图片的话，完全可以通过矢量绘图结合渐变实现，不会出现画质失真的问题，推荐用react-native-svg库来实现，步骤如下：

1. 安装依赖 #

如果你用的是Expo项目：

expo install react-native-svg

裸React Native项目：

npm install react-native-svg
cd ios && pod install

2. 实现弧形渐变组件 #

下面是一个底部弧形渐变的示例，你可以根据需求调整弧形的弧度、渐变颜色和位置：

import React from 'react';
import { View } from 'react-native';
import Svg, { Defs, LinearGradient, Stop, Path } from 'react-native-svg';

const CurvedGradient = () => {
  return (
    <View style={{ width: '100%', height: 200 }}>
      <Svg width="100%" height="100%" viewBox="0 0 375 200" preserveAspectRatio="none">
        {/* 定义线性渐变 */}
        <Defs>
          <LinearGradient id="curvedGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <Stop offset="0%" stopColor="#4c669f" />
            <Stop offset="50%" stopColor="#3b5998" />
            <Stop offset="100%" stopColor="#192f6a" />
          </LinearGradient>
        </Defs>
        {/* 绘制弧形路径，填充渐变 */}
        <Path
          d="M0,0 L375,0 L375,150 Q187.5,200 0,150 Z"
          fill="url(#curvedGradient)"
        />
      </Svg>
    </View>
  );
};

export default CurvedGradient;

关键参数说明 #

• 渐变配置：LinearGradient的x1/y1/x2/y2控制渐变的方向，Stop的offset和stopColor定义渐变的颜色节点，你可以自由调整颜色值和比例。
• 弧形路径：Path的d属性是SVG路径指令，示例中Q187.5,200 0,150是二次贝塞尔曲线，用来创建弧形效果：
  • Q表示二次贝塞尔曲线，第一个坐标是控制点，第二个是终点
  • 调整控制点的Y值（示例中200）可以改变弧形的弯曲程度，值越大弧度越明显
• viewBox：根据你的组件尺寸调整，保证弧形在容器内正确显示。

其他调整方向 #

• 如果需要顶部弧形，修改Path的d路径即可，比如：

  d="M0,50 Q187.5,0 375,50 L375,200 L0,200 Z"
  

• 支持动态调整渐变颜色、弧度，只需修改对应参数即可。

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