web-dev-qa-db-ja.com

反応ネイティブのテキストの影

私のサイトでは、このテキストの影のタイトルがあります：

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と同じ効果を得る方法がわかりません。

どのようにできるのか？

react-nativeshadow
30
Luca Romagnoli

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

ベニーゲネルgenの答えを試してみたところ、うまくいきました。私はこのようなものを使用しました...

<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>React Nativeアプリでこのようにしてみます

0
Ravindra