在react-native中使用CSS过滤器

Question

似乎react-native没有实现CSS'filter属性。

有没有办法复制那些？具体来说，我正在寻找一种方法来将以下内容更改为图像，而不是为此创建特殊图像：

• 亮度
• 色相
• 饱和度
• 模糊

Answer 1

RN的CSS支持有限，但在您考虑典型移动应用程序应该要求的内容时并非如此。您可以查看this attempt at Instagram操作，代码this link.

Answer 2

RN已通过blurRadius道具支持图像模糊。您可以在我的react-native-color-matrix-image-filters库中找到其余的过滤器：

import { Image } from 'react-native';
import { Saturate } from 'react-native-color-matrix-image-filters';

const SaturatedImage = ({ saturate, ...imageProps }) => (
  <Saturate value={saturate}>
    <Image {...imageProps} />
  </Saturate>
);

Answer 3

更新RN 0.62.2： 我正在使用上述的库react-native-color-matrix-image-filters，但我也在寻找Web支持。截至目前，React Native for Web支持CSS过滤器属性：https://github.com/ndbroadbent/react-native-web/blob/91e4528eac16e10fd3d42644fc4c0c8047bee1bd/docs/components/View.md 对于iOS和Android，此样式属性不起作用。