在 React Native 中创建白色文本轮廓

Question

我需要在 React Native 中创建文本的动态白色轮廓。我尝试了几个小时来解决这个问题，但无法解决问题。仅限 iOS。

它应该看起来像这样：

适用于任何类型的绳子，如三角龙、霸王龙等

我尝试了许多不同的 textShadow 方法，但似乎没有任何效果。

Answer 1

你尝试过react-native-svg或react-native-skia吗？考虑以下示例。

const OutlinedText = ({
  text,
  fontSize,
  fontWeight,
  outlineWidth,
  textColor,
  outlineColor,
}) => {
  return (
    <Svg
      height={fontSize + outlineWidth * 2}
      width="100%"
      viewBox={`0 0 ${text.length * fontSize} ${fontSize + outlineWidth * 2}`}>
      <Text
        x="50%"
        y="50%"
        fontSize={fontSize}
        fontWeight={fontWeight}
        fill={textColor}
        stroke={outlineColor}
        strokeWidth={outlineWidth}
        strokeLinejoin="round"
        textAnchor="middle"
        alignmentBaseline="middle">
        {text}
      </Text>
    </Svg>
  );
};