在 React Native 中控制顏色的透明度
React 是用於開發現代 Web 應用程式的最流行的框架之一。
好訊息是熟悉此框架的開發人員可以運用他們的技能使用 React Native 庫建立功能強大的移動應用程式。
使用這個 JavaScript 框架
構建整個移動應用程式或將 React Native
位新增到現有應用程式。
在 React Native 中設定顏色值
如果不允許開發人員應用自定義樣式,該框架就不會那麼受歡迎。本文將討論使用 color
和 backgroundColor
屬性的各種應用程式元素。
React 中可接受的顏色表示
表示顏色值最流行的方式是使用 Red
、Green
、Blue
格式。大多數開發人員要麼編寫 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 還允許 HSL
、color numbers
和 even 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 is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn