react-pdf的Line标签无法生成水平线问题求助

我正在使用 react-pdf 生成简历，希望给每个章节标题下方添加一条水平线，但尝试后没能成功实现。参考官方Line示例后，我的代码如下：

const Resume = () => {
  const info = {
    name: "James Bond",
    email: "007@gmail.com",
    phone: "+65 12345678",
  };

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.title}>
          <Text>{info.name}</Text>
        </View>
        <View style={styles.subtitle}>
          <Text>
            {info.email} | {info.phone}
          </Text>
        </View>
        <Svg height="500" width="500">
          <Line
            x1="0"
            y1="200"
            x2="200"
            y2="200"
            strokeWidth={2}
            stroke="rgb(0,0,0)"
          />
        </Svg>
        <View style={styles.sectionTitle}>
          <Text>Education</Text>
        </View>
        <View style={styles.sectionTitle}>
          <Text>Work Experience</Text>
        </View>
        <View style={styles.sectionTitle}>
          <Text>Skills</Text>
        </View>
      </Page>
    </Document>
  );
};

React 版本：18.2.0
react-pdf 版本：3.1.9

解决方法 #

方法1：用View模拟水平线（推荐，更简洁） #

不需要依赖Svg组件，直接通过View的样式实现水平线，和章节标题放在同一容器中，排版更精准：

import { Document, Page, View, Text, StyleSheet } from '@react-pdf/renderer';

const Resume = () => {
  const info = {
    name: "James Bond",
    email: "007@gmail.com",
    phone: "+65 12345678",
  };

  const styles = StyleSheet.create({
    page: {
      padding: 30,
    },
    title: {
      fontSize: 24,
      fontWeight: 'bold',
      marginBottom: 8,
    },
    subtitle: {
      fontSize: 12,
      marginBottom: 20,
    },
    sectionContainer: {
      marginBottom: 15,
    },
    sectionTitle: {
      fontSize: 16,
      fontWeight: 'bold',
      marginBottom: 4,
    },
    horizontalLine: {
      height: 1,
      backgroundColor: '#000',
      width: '100%',
    },
  });

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.title}>
          <Text>{info.name}</Text>
        </View>
        <View style={styles.subtitle}>
          <Text>
            {info.email} | {info.phone}
          </Text>
        </View>
        
        <View style={styles.sectionContainer}>
          <Text style={styles.sectionTitle}>Education</Text>
          <View style={styles.horizontalLine} />
        </View>
        
        <View style={styles.sectionContainer}>
          <Text style={styles.sectionTitle}>Work Experience</Text>
          <View style={styles.horizontalLine} />
        </View>
        
        <View style={styles.sectionContainer}>
          <Text style={styles.sectionTitle}>Skills</Text>
          <View style={styles.horizontalLine} />
        </View>
      </Page>
    </Document>
  );
};

方法2：修复Svg Line的定位问题 #

你之前的Svg Line无效，原因是设置了固定的500x500尺寸，且y1=200让线条位置过于靠下，不在章节标题区域内。调整后让Svg和标题对齐：

import { Document, Page, View, Text, StyleSheet } from '@react-pdf/renderer';
import { Svg, Line } from '@react-pdf/svg';

const Resume = () => {
  const info = {
    name: "James Bond",
    email: "007@gmail.com",
    phone: "+65 12345678",
  };

  const styles = StyleSheet.create({
    page: {
      padding: 30,
    },
    title: {
      fontSize: 24,
      fontWeight: 'bold',
      marginBottom: 8,
    },
    subtitle: {
      fontSize: 12,
      marginBottom: 20,
    },
    sectionContainer: {
      marginBottom: 15,
    },
    sectionTitle: {
      fontSize: 16,
      fontWeight: 'bold',
      marginBottom: 8,
    },
    sectionLineSvg: {
      width: '100%',
      height: 10,
    },
  });

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.title}>
          <Text>{info.name}</Text>
        </View>
        <View style={styles.subtitle}>
          <Text>
            {info.email} | {info.phone}
          </Text>
        </View>
        
        <View style={styles.sectionContainer}>
          <Text style={styles.sectionTitle}>Education</Text>
          <Svg style={styles.sectionLineSvg}>
            <Line
              x1="0"
              y1="0"
              x2="100%"
              y2="0"
              strokeWidth={1}
              stroke="#000"
            />
          </Svg>
        </View>
        
        <View style={styles.sectionContainer}>
          <Text style={styles.sectionTitle}>Work Experience</Text>
          <Svg style={styles.sectionLineSvg}>
            <Line
              x1="0"
              y1="0"
              x2="100%"
              y2="0"
              strokeWidth={1}
              stroke="#000"
            />
          </Svg>
        </View>
        
        <View style={styles.sectionContainer}>
          <Text style={styles.sectionTitle}>Skills</Text>
          <Svg style={styles.sectionLineSvg}>
            <Line
              x1="0"
              y1="0"
              x2="100%"
              y2="0"
              strokeWidth={1}
              stroke="#000"
            />
          </Svg>
        </View>
      </Page>
    </Document>
  );
};

内容的提问来源于stack exchange，提问作者tayron.vikranth