android - 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

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

1. 困难 - 将字体转换为 SVG 并仅使用带有 svg 参数的字母或单词或使用 Canvas
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

这种方式有助于获得更浓密的阴影。更多迭代 - 更多密度