Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我想在我的本机应用程序中做同样的事情。

我已经看过这些属性：

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

我尝试了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

<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>我在我的本机应用程序中尝试这样做

文本阴影反应原生

3 个答案: