React Native SVG路径缩放指南：理解ViewBox与内容适配

import * as React from "react";
import Svg, { SvgProps, Path } from "react-native-svg";

interface ViewFinderProps extends SvgProps {
  width: number;
  height: number;
  top: number;
  left: number;
}

export const ViewFinder = (props: ViewFinderProps) => {
  const { width, height, top, left } = props;
  return (
    <Svg
      width={width}
      height={height}
      style={{
        borderColor: "green",
        borderWidth: 2,
        position: "absolute",
        left: 0,
        top: 0,
        width: "100%", // 注意：这里的width/height: '100%' 可能会与组件自身的width/height属性冲突
        height: "100%",
      }}
      fill="none"
      stroke="green"
      preserveAspectRatio="none"
      viewBox={`0 0 ${width} ${height}`} // 问题所在：viewBox被动态设置
    >
      <Path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></Path>
      <Path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></Path>
    </Svg>
  );
};

import * as React from "react";
import Svg, { SvgProps, Path } from "react-native-svg";

interface ViewFinderProps extends SvgProps {
  // 使用更明确的名称，避免与viewBox的width/height混淆
  displayWidth: number;
  displayHeight: number;
  // top和left可以作为style属性传递，或者根据需求保留
  left?: number;
  top?: number;
}

export const ViewFinder = (props: ViewFinderProps) => {
  const { displayWidth, displayHeight, left = 0, top = 0, ...restProps } = props;

  // 核心改动：使用原始Feather图标的固定viewBox
  // 对于Feather Icons，其原始设计画布通常是24x24
  const originalViewBox = "0 0 24 24";

  return (
    <Svg
      width={displayWidth} // Svg组件的实际渲染宽度，由外部动态传入
      height={displayHeight} // Svg组件的实际渲染高度，由外部动态传入
      style={{
        borderColor: "green",
        borderWidth: 2,
        position: "absolute",
        left: left,
        top: top,
        // 这里的width/height: '100%'通常用于父容器，
        // Svg组件自身的width/height属性会优先控制其尺寸
        // 如果想让Svg填充父容器，可以不设置width/height属性，
        // 而通过style的flex或百分比实现，但通常直接设置width/height更精确
      }}
      fill="none"
      stroke="green"
      // preserveAspectRatio="none" 会强制拉伸以填充，可能导致变形
      // 默认值是 "xMidYMid meet"，通常是更安全的选项，保持比例并尽可能大地适应
      // 如果需要完全填充且允许变形，则使用 "none"
      preserveAspectRatio="none"
      viewBox={originalViewBox} // 核心改动：使用固定的viewBox
      {...restProps} // 传递其他SvgProps，例如strokeWidth等
    >
      <Path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></Path>
      <Path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></Path>
    </Svg>
  );
};

import React, { useState } from 'react';
import { View } from 'react-native';
// 假设 BarCodeEvent 和 ViewFinder 组件已定义
// import { BarCodeEvent } from 'react-native-camera'; // 或其他条码扫描库
// import { ViewFinder } from './ViewFinder'; // 假设ViewFinder在当前目录

// 模拟 BarCodeEvent 类型
interface BarCodeEvent {
  type: string;
  data: string;
  bounds?: {
    origin: { x: number; y: number };
    size: { width: number; height: number };
  };
}

const BarcodeScannerScreen: React.FC = () => {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);

  const handleBarCodeScanned = ({ type, data, bounds }: BarCodeEvent) => {
    if (!bounds) return;
    const { origin, size } = bounds;
    setX(origin.x);
    setY(origin.y);
    setWidth(size.width);
    setHeight(size.height);
    // 可以在这里处理扫描到的条码数据
    console.log(`Scanned: ${type}, ${data}`);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {/* 假设这里是你的相机预览组件 */}
      {/* <Camera
        onBarCodeScanned={handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      /> */}

      {/* 渲染 ViewFinder，其尺寸和位置由扫描框决定 */}
      {width > 0 && height > 0 && (
        <ViewFinder
          displayWidth={width}
          displayHeight={height}
          left={x}
          top={y}
          strokeWidth={2} // 示例：传递其他props
          stroke="red" // 示例：覆盖默认stroke颜色
        />
      )}
    </View>
  );
};

export default BarcodeScannerScreen;