React Native如何实现带透明背景的方形进度条

推荐方案：自定义SVG实现（适配二维码外围场景最优） #

该方案无需依赖复杂第三方库，可完全自定义透明度、拐角样式、进度效果，不会遮挡二维码内容，实现步骤如下：

• 首先安装react-native-svg依赖（大部分RN项目已内置，未安装可执行npm install react-native-svg）
• 核心逻辑为绘制两层重叠的方形描边：底层为全路径的透明进度槽，上层为对应进度的描边路径，通过修改strokeDashoffset属性控制进度展示比例
• 将SVG组件与二维码组件放在同一相对定位的父容器内，设置与二维码一致的宽高即可实现外围包裹效果

简化实现代码参考：

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

// 方形进度条组件
const SquareProgress = ({ 
  size = 200, // 尺寸和二维码保持一致
  progress = 0.7, // 进度值 0-1
  strokeWidth = 4, // 进度条宽度
  progressColor = '#1677ff'
}) => {
  // 计算方形总周长
  const perimeter = 4 * size;
  // 计算进度偏移量
  const offset = perimeter * (1 - progress);

  return (
    <Svg width={size} height={size} style={{ position: 'absolute' }}>
      {/* 透明背景进度槽 */}
      <Rect
        x={strokeWidth / 2}
        y={strokeWidth / 2}
        width={size - strokeWidth}
        height={size - strokeWidth}
        stroke="rgba(255,255,255,0.15)"
        strokeWidth={strokeWidth}
        fill="transparent"
      />
      {/* 实际进度条 */}
      <Rect
        x={strokeWidth / 2}
        y={strokeWidth / 2}
        width={size - strokeWidth}
        height={size - strokeWidth}
        stroke={progressColor}
        strokeWidth={strokeWidth}
        strokeDasharray={perimeter}
        strokeDashoffset={offset}
        fill="transparent"
        strokeLinecap="round"
      />
    </Svg>
  )
}

// 业务页使用示例
const QrCodeWithProgress = () => {
  return (
    <View style={{ position: 'relative', width: 200, height: 200 }}>
      {/* 这里放你的二维码组件 */}
      {/* <QrCode value="xxx" size={200} /> */}
      <SquareProgress size={200} progress={0.6} />
    </View>
  )
}

替代方案：第三方组件快速实现 #

如果不需要高度自定义，也可以使用现有方形进度条类组件，只需将组件背景属性设置为transparent即可适配透明需求，不过该方案调整进度条样式、适配二维码尺寸的灵活度低于自定义SVG方案。

注意事项 #

• 进度条的strokeWidth需要根据二维码的外围留白调整，避免遮挡二维码有效识别区域
• 需要平滑进度动画时，可搭配RN的AnimatedAPI动态修改strokeDashoffset值实现
• 两层Rect均设置fill="transparent"即可完全透出下方二维码内容，不会产生遮挡

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