January 25, 2019
ReactNativeでスタイルを書いていてネストしたテキストが親のOpacityを上書き出来ない
Opacity in nested components doesn’t work as expected · Issue #3183 · facebook/react-native · GitHub
<Text style="text">
<Text style="link">利用規約</Text>に同意する
</TexT>
opacityプロパティは適用しているビューの全体の不透明度を変更します。
どの子コンポーネントも親の不透明度を継承するようなのでcolorのrgbaで指定する必要があるっぽい?
NG
text: {
color: '#fff',
opacity: 0.7,
},
link: {
color: '#fff',
opacity: 1,
textDecorationLine: 'underline',
},
GOOD
text: {
color: 'rgba(255, 255, 255, 0.7)',
},
link: {
color: 'rgba(255, 255, 255, 1)',
textDecorationLine: 'underline',
},