在 React Native 中控制顏色的透明度

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React Native 中設定顏色值
  2. React 中可接受的顏色表示
  3. 在 React 中指定顏色的不透明度
在 React Native 中控制顏色的透明度

React 是用於開發現代 Web 應用程式的最流行的框架之一。

好訊息是熟悉此框架的開發人員可以運用他們的技能使用 React Native 庫建立功能強大的移動應用程式。

使用這個 JavaScript 框架 構建整個移動應用程式或將 React Native 位新增到現有應用程式。

在 React Native 中設定顏色值

如果不允許開發人員應用自定義樣式,該框架就不會那麼受歡迎。本文將討論使用 colorbackgroundColor 屬性的各種應用程式元素。

React 中可接受的顏色表示

表示顏色值最流行的方式是使用 RedGreenBlue 格式。大多數開發人員要麼編寫 rgb() 函式,要麼編寫代表特定顏色的不同十六進位制值。

所有瀏覽器都支援這些顏色表示。你也可以在開發 React Native 應用程式時使用它們。

讓我們看看如何使用 rgb() 函式來表示顏色值:

div {
    background-color: rgb(100, 100, 100) 
    }

rgb() 函式接受三個引數:數字 0 到 255。每個引數代表三種顏色的陰影:紅色、綠色和藍色。

數字越高,陰影越深。例如,0 是沒有顏色,白色。相反,255 是最深的顏色。

React Native 還允許你使用十六進位制顏色值指定顏色。例如:

div {
    background-color: #ff00ff 
}

在這種情況下,顏色的順序仍然相同:紅色、綠色和藍色。但是,這些是十六進位制數字,範圍從 00(白色)到 FF

或者,你也可以使用由三個符號組成的較短的十六進位制值。React Native 還允許 HSLcolor numberseven named 顏色。

檢視[本指南](https://React Native.dev/docs/colors#color-representations)以獲取具體資訊。你可以使用數十種命名顏色。

要檢視完整列表,請訪問[此頁面](https://React Native.dev/docs/colors#color-keywords)。

在 React 中指定顏色的不透明度

在 React Native 應用程式中編寫樣式時,有正確和錯誤的方法來指定顏色的不透明度。錯誤的方法是使用 opacity CSS 屬性。

這很糟糕,因為它會影響整個檢視的透明度,包括任何文字或影象。

如果要指定背景顏色的不透明度,你應該使用 rgba(),它與 rgb() 函式略有不同。

它接受四個引數而不是三個。前三個引數相同,但最後一個將不透明度指定為十進位制值。讓我們看一個例子:

div {
    background-color: rgba(200, 200, 200, 0.3)
}

十進位制值可以是從 0 到 1 的任何值。在這種情況下,我們的背景將是 30% 彩色70% 透明

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn