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

1. 在 React Native 中設定顏色值
2. React 中可接受的顏色表示
3. 在 React 中指定顏色的不透明度

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% 透明。