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