在React-Native中带有纯阴影的文本

Question

我正在开发一个应用程序，并试图在React-Native中实现实心阴影（按照设计要求），如下图所示。

注意：我不能使用图像，因为这是一个多语言应用程序。

我尝试了什么。

我试图在文本背景上添加阴影，但是看起来像这样：-

样式代码：

{
    textShadowColor: 'rgba(255, 255, 255, 1)',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 5,
    fontWeight:'bold',
}

然后我尝试了borderWidth，但它也无法正常工作，可以在组件边框上工作。

样式代码：

{
    textShadowColor: 'rgba(255, 255, 255, 1)',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 5,
    fontWeight:'bold', 
    borderWidth:1,
    borderColor:'white'
}

两者都不适合我。没有人更接近设计。有相同的解决方案吗？ 否则无法在React-Native中实现。

Answer 1

请尝试以下代码：

h1 {
    color: orange;
    text-shadow: -2px -2px 1px white,
         2px -2px 1px white,
         2px -2px 1px white,
        -2px  1px 1px white,
         2px  1px 1px white,
        -2px  2px 1px white,
         1px  2px 1px white,
         2px  2px 10px white,
        -3px -3px 1px white,
        -3px -3px 1px white,
         0px -3px 1px white,
         2px -3px 1px white,
         3px -3px 1px white,
         3px -2px 1px white,
         3px  1px 1px white,
         3px  2px 1px white,
         3px  3px 1px white,
         2px  3px 1px white,
         1px  3px 1px white,
        -2px  3px 1px white,
        -3px  3px 1px white,
        -3px  2px 1px white,
        -3px  1px 1px white,
        -3px -2px 1px white;
}
div{
background:black;
text-align:center;
}

<div>
 <h1>skip</h1>
</div>

Answer 2

我发现只有两种方法可以解决此问题。

1. 困难-将字体转换为SVG，仅使用带svg参数的字母或单词或使用画布
2. 轻松-将单词环绕以查看并添加绝对位置重复的内容

<View style={{position: 'relative'}}>
  <TextWithShadow style={{position:'relative'}}>Word</TextWithShadow>
  <TextWithShadow style={{position:'absolute'}}>Word</TextWithShadow>
  <TextWithShadow style={{position:'absolute'}}>Word</TextWithShadow>
<View>

Shadow

这样可以帮助获得更浓密的阴影。迭代次数更多-密度更高