如何将图像转换为灰度反应原生？

Question

有没有办法在反应原生中操纵图像,因此它显示为灰度？我想尝试类似的东西:filter: grayscale(1)

谢谢.

Answer 1

处理以前删除的答案，可以通过有一个图像，而另一个图像绝对位于顶部来实现。

“后退”图像使用tintColor，如https://facebook.github.io/react-native/docs/image.html所定义，这会将所有不透明的像素变为该颜色。

在“正面”图像上添加了不透明度，从而使“背面”颜色向前移动，从而为您提供“灰度”图像

之前：

<React.Fragment>
   <Image source={<something>} />
</React.Fragment>

之后（带有背景图片）：

<React.Fragment>
   <Image source={<something>} style={{ tintColor: 'gray' }} />
   <Image source={<something>} style={{ position: 'absolute', opacity: 0.3}} />
</React.Fragment>

红色为tintColor：

Answer 2

您可以使用我的react-native-color-matrix-image-filters库：

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

const GrayscaledImage = (imageProps) => (
  <Grayscale>
    <Image {...imageProps} />
  </Grayscale>
);

Answer 3

尚不支持即时执行此操作。如果它是静态图像，您可以在 Photoshop 等中对其进行转换。