文本阴影反应原生

Question

在我的网站上,我有一个带有此文字阴影的标题:

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

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

我想在我的本机应用中做同样的事情.

我见过这些属性:

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

但我不知道如何获得与html相同的效果.

我能怎么做？

Answer 1

CSS text-shadow具有以下语法,

text-shadow:h-shadow v-shadow blur-radius color | 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
}

Answer 2

我尝试了本尼格内尔爵士的回答，它奏效了。我用这样的东西...

<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

我在我的本机应用程序中尝试这样

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