React Native中SVG竖线不显示问题求助

竖线无法显示的核心原因 #

1. 绝对定位View未设置位置属性：给竖线外层View添加position: 'absolute'后，未指定top/left等位置参数，且绝对定位元素默认宽高为0，导致SVG被包裹在不可见区域内。
2. 层级覆盖问题：水平线所在View设置了zIndex: -100（处于背景层），但竖线的外层View未设置zIndex，可能被页面其他元素遮挡。
3. 固定尺寸适配问题：竖线SVG的高度设为固定值844，在不同屏幕尺寸的设备上可能超出可视区域或显示不全。

分步解决办法 #

1. 修正绝对定位View的样式 #

给竖线外层View添加明确的位置和层级，确保它显示在背景层且处于可视区域：

// home.js
<View style={{zIndex: -100}}>
  <HorizontalLine />
</View>
<View style={{position: 'absolute', top: 0, left: 0, zIndex: -100}}>
  <VerticalLine />
</View>

或者更简洁地将两个坐标轴放在同一个全屏绝对定位容器中：

<View style={{position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: -100}}>
  <HorizontalLine />
  <VerticalLine />
</View>

2. 优化SVG的屏幕适配性 #

避免使用固定宽高，改用React Native的Dimensions获取屏幕尺寸，让坐标轴自适应不同设备：

修改HorizontalLine.js

import { Svg, Path } from 'react-native-svg';
import { Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

export default function HorizontalLine() {
  return (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      width={width}
      height={2}
      fill="none"
      viewBox={`0 0 ${width} 2`}
    >
      <Path
        stroke="#000"
        strokeLinecap="round"
        strokeWidth={2}
        d={`M${width - 1} 1L1 1`}
      />
    </Svg>
  );
}

修改VerticalLine.js

import { Svg, Path } from 'react-native-svg';
import { Dimensions } from 'react-native';

const { height } = Dimensions.get('window');

export default function VerticalLine() {
  return (
    <Svg
      width={2}
      height={height}
      viewBox={`0 0 2 ${height}`}
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <Path
        stroke="#000"
        strokeWidth={2}
        strokeLinecap="round"
        d={`M1 1L1 ${height - 1}`}
      />
    </Svg>
  );
}

3. 简化SVG路径（可选） #

竖线SVG的路径d="M1 843L1.00007 1"可以简化为d="M1 1L1 843"（从顶部到底部），避免小数点精度带来的潜在问题。

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