在 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