如何在@react-pdf/renderer中实现可居中对齐的带text-shadow效果文本？

核心思路是将原本基于left/top的位置偏移改为transform: translate()实现，同时给所有绝对定位的文本层设置width: 100%继承父容器对齐属性，不会破坏原本的文本对齐逻辑。

修改后的完整组件代码如下：

import React from 'react'
import { StyleSheet, Text, View } from '@react-pdf/renderer'

const BaseStyles = {
  FakeShadowProvider: {
    position: "relative",
  },
  // 描边层统一配置：宽度100% 继承对齐属性
  strokeLayer: {
    position: "absolute",
    width: "100%",
    color: "black",
  },
  FakeShadow: {
    position: "absolute",
    width: "100%",
    transform: "translate(3pt, 1pt)",
    color: "black",
  },
  FakeBorderTop: {
    transform: "translate(0, -1pt)",
  },
  FakeBorderRight: {
    transform: "translate(1pt, 0)",
  },
  FakeBorderBottom: {
    transform: "translate(0, 1pt)",
  },
  FakeBorderLeft: {
    transform: "translate(-1pt, 0)",
  },
}

const PDFTextWithShadow = ({
  value,
  textAlign = "left",
  fontSize,
  color,
}) => {
  const styles = StyleSheet.create({
    FakeShadowProvider: {
      ...BaseStyles.FakeShadowProvider,
      textAlign,
      fontSize,
    },
    FakeShadow: {
      ...BaseStyles.strokeLayer,
      ...BaseStyles.FakeShadow,
    },
    FakeBorderTop: {
      ...BaseStyles.strokeLayer,
      ...BaseStyles.FakeBorderTop,
    },
    FakeBorderRight: {
      ...BaseStyles.strokeLayer,
      ...BaseStyles.FakeBorderRight,
    },
    FakeBorderBottom: {
      ...BaseStyles.strokeLayer,
      ...BaseStyles.FakeBorderBottom,
    },
    FakeBorderLeft: {
      ...BaseStyles.strokeLayer,
      ...BaseStyles.FakeBorderLeft,
    },
    Text: {
      color,
    }
  })

  return (
    <View style={styles.FakeShadowProvider}>
      <Text style={styles.FakeShadow}>
        {value}
      </Text>
      <Text style={styles.FakeBorderTop}>
        {value}
      </Text>
      <Text style={styles.FakeBorderRight}>
        {value}
      </Text>
      <Text style={styles.FakeBorderBottom}>
        {value}
      </Text>
      <Text style={styles.FakeBorderLeft}>
        {value}
      </Text>
      <Text style={styles.Text}>
        {value}
      </Text>
    </View>
  )
}

export default PDFTextWithShadow

说明 #

• 所有描边、阴影层都设置了width: 100%，会完全继承父容器的textAlign属性，文本会先按对齐规则定位，再通过transform做偏移，不会影响原本的对齐效果
• transform是基于元素本身当前位置的位移，和父容器的对齐逻辑完全解耦，适配任意长度的可变文本
• 同时支持left、center、right三种对齐方式，无需额外计算文本宽度

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