web-dev-qa-db-fra.com

Ombre de texte en réaction native

sur mon site, j'ai un titre avec cette ombre de texte:

h1.title {
 text-shadow: -1px 1px 10px rgba(0, 0, 0, 0.75)
 }
<h1 class="title">title</h1>

Je veux faire la même chose dans mon application native de réaction.

J'ai vu les propriétés:

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

mais je ne sais pas comment avoir le même effet de HTML.

Comment puis-je faire?

react-nativeshadow
30
Luca Romagnoli

CSS text-shadow a la syntaxe ci-dessous,

text-shadow : h-shadow v-shadow flou-rayon couleur | none | initial | inherit;

Pour obtenir un effet similaire avec les CSS que vous avez fournis, vous pouvez utiliser quelque chose comme ceci,

// 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
}
49
bennygenel

J'ai essayé la réponse de monsieur bennygenel et cela a fonctionné. Je l'ai utilisé quelque chose comme ça ...

<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
     }
});
8
Rufo Gabrillo Jr

<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> J'essaie comme ça dans mon application native de réaction

0
Ravindra