react-native - react native : How do I programmatically make images black-and-white-filtered?

Question

有什么方法可以在 React Native 中以编程方式对图像进行黑白过滤？我有一些带有白色背景和彩色字母的图像。我希望这些字母都是黑色的，这样它们很容易脱颖而出。

Answer 1

你好@Jinwook Kim，

您需要 style 属性来对图像应用灰度滤镜。以下是如何执行此操作的示例:

import React from 'react';
import { Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  image: {
    filter: 'grayscale(100%)',  // You can adjust the intensity of the grayscale accoding. value of 0% will produce a normal images.
  },
});

the grayscale(100%) filter in the Image component, which will make black and white.

const MyImage = () => {
  return (
    <Image
      source={require('./my-image.png')}
      style={styles.image}
    />
  );
};

export default MyImage;