ReactNativeで半透過なViewをつくる

opacityをいじっていてよくあるやつ。モーダル画面をつくる時、親要素でオーバーレイ用の半透明なViewを作り、その子要素にモーダルの内容出したい時なんかあると思う。そういう場合、親要素にopacityを設定したら、それが子要素にもそのまま適用されて子要素もスケスケになってしまう（画像の上半分）。これは困る。

解決法

rgbaを使う。画像の再現ソースは以下のような感じ。半透明にしたいんだからopacityつかうだろ！！と思うと、こういうケースではうまくいかないみたい。

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  overlay: {
    flex: 1
  },
  inside: {
    margin: 50,
    padding: 50,
    backgroundColor: 'white'
  }
})


<View style={styles.container}>
  <View style={[styles.overlay, { opacity: 0.3, backgroundColor: 'black' }]}>
    <View style={styles.inside}>
      <Text>これはやだ！！</Text>
    </View>
  </View>
  <View style={[styles.overlay, { backgroundColor: 'rgba(0,0,0,0.3)' }]}>
    <View style={styles.inside}>
      <Text>こうがいい！！</Text>
    </View>
  </View>
</View>