反应本机中的文本阴影

Question

在我的网站中，我有一个带有此文本阴影的标题：

h1.title {
 text-shadow: -1px 1px 10px rgba(0, 0, 0, 0.75)
 }

<h1 class="title">title</h1>

我想在我的 react native 应用中做同样的事情。

我看过属性：

textShadowColor color
textShadowOffset {width: number, height: number}
textShadowRadius number

但是我不知道怎么实现和html一样的效果。

我该怎么办？

Answer 1

我在我的 react native 应用中尝试这样

<Text 
    style={{
        color: "white", 
        textShadowColor: 'black', 
        textShadowOffset: { width: -1, height: 0 },
        textShadowRadius: 10, 
        fontSize: hp('2%'), 
        fontWeight: '800'}}
    >
    Online Sports Store to Buy Sports Goods,
</Text>

Answer 2

我尝试了 bennygenel 爵士的回答，它奏效了。 我用过这样的东西...

<View>
    <Text style={styles.textWithShadow}>Hello world</Text>
</View>

.....

const styles = StyleSheet.create({
     textWithShadow:{
         textShadowColor: 'rgba(0, 0, 0, 0.75)',
         textShadowOffset: {width: -1, height: 1},
         textShadowRadius: 10
     }
});

Answer 3

CSS text-shadow 具有以下语法，

文本阴影：h-shadow v-shadow 模糊半径颜色|none|initial|inherit;

要实现与您提供的 css 类似的效果，您可以使用类似这样的东西，

// text-shadow: -1px 1px 10px rgba(0, 0, 0, 0.75)

{
  textShadowColor: 'rgba(0, 0, 0, 0.75)',
  textShadowOffset: {width: -1, height: 1},
  textShadowRadius: 10
}