1. ホーム
  2. リアクトネイティブ

[解決済み】React Nativeでビューの背景色を透明に設定する方法

2022-04-13 04:30:50

質問

これは、私が使用したビューのスタイルです。

backCover: {
  position: 'absolute',
  marginTop: 20,
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
}

現在、背景は白です。背景色は次のように変更することができます。 '#343434' しかし、色には最大6つの16進数値しか受け付けないため、以下のように不透明度を与えることができません。 '#00ffffff' . 私はこのように不透明度を使用してみました。

backCover: {
  position: 'absolute',
  marginTop: 20,
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  opacity: 0.5,
}

が、ビューのコンテンツの視認性を低下させます。 そこで、何か答えがあれば教えてください。

どのように解決するのですか?

使用方法 rgba の値を指定します。 backgroundColor .

例えば、こんな感じです。

backgroundColor: 'rgba(52, 52, 52, 0.8)'

これは、不透明度小数から導かれる80%のグレー色に設定されます。 0.8 . この値は、以下のいずれかになります。 0.0 まで 1.0 .