在 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