70 votes

ombre de texte dans réagir natif

dans mon site j'ai un titre à ce texte de l'ombre:

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 réagir application native.

J'ai vu les propriétés:

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

mais je ne sait pas comment faire pour avoir le même effet de html.

Comment puis-je faire?

123voto

bennygenel Points 13565

CSS text-shadow a la syntaxe ci-dessous,

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

Pour obtenir un effet similaire avec le CSS que vous avez fourni, vous pouvez utiliser quelque chose comme ça,

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

24voto

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
     }
});
 

7voto

Ravindra Points 15

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X