React-Native 中带有实心阴影的文本答案

【问题标题】：Text with solid shadow in React-NativeReact-Native 中带有实心阴影的文本
【发布时间】：2019-01-07 17:54:25
【问题描述】：

我正在开发一个应用程序并尝试在 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 中无法实现。

【问题讨论】：

标签： android css react-native text shadow

【解决方案1】：

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

困难 - 将字体转换为 SVG，只使用带有 svg 参数或使用 Canvas 的字母或单词
简单 - 将单词换行以查看并添加具有绝对位置的重复项

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

Shadow

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

【讨论】：