ReactNative进阶（五十）自定义主题色

2023-12-15 13:03:47

文章目录

一、前言

互联网应用需要能够根据实事情况做出相应调整，例如主题置灰效果。比较简单的实施方案是在样式中添加滤镜效果，例如：把<html>替换成<html style="filter:grayscale(1)">即可。核心代码就是filter:grayscale(1)，意思是「把当前元素及其后代元素设置成100%的灰度模式」。

如果需要兼容低版本浏览器，可以通过如下方式实现：

<html class="gray">

// 现代浏览器
.gray {
  filter: grayscale(1);
}
// 远古浏览器
.gray {
  -webkit-filter: grayscale(1); /* Old Chrome、Old Safari、Old Opera*/
  filter: grayscale(1); /* 现代浏览器标准 */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /* IE */
}

二、RN 中实现自定义主题色

鉴于RN不支持filter设置滤镜属性。故需通过原生层面实现。

三、拓展阅读

文章来源:https://blog.csdn.net/sunhuaqiang1/article/details/134081008
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。