recolog

@t0m0120

ネストしたテキストが親のOpacityを上書き出来ない

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',
  },