在本机反应中调整图像大小而不使用抗锯齿

Question

是否可以调整像素艺术图像的大小而不对其进行反应模糊？

这是我的意思的一个例子，React Native 由于某种原因模糊了图像，我没有找到关闭它的方法

Answer 1

来自

Image

 的 

react-native-skia

不平滑像素艺术。缩放无锯齿。

https://shopify.github.io/react-native-skia/docs/images/

import { Canvas, Image, useImage } from "@shopify/react-native-skia";
 
const ImageDemo = () => {
  const image = useImage(require("./assets/pixelart.png"));
  return (
    <Canvas style={{ flex: 1 }}>
      <Image image={image} fit="contain" x={0} y={0} width={256} height={256} />
    </Canvas>
  );
};

Answer 2

您可以在图像标签内使用resizeMode。

例如

<Image resizeMode={"center"} source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}/>

确定当框架与原始图像尺寸不匹配时如何调整图像大小。默认覆盖。

• cover：均匀缩放图像（保持图像的长宽比） 这样图像的两个尺寸（宽度和高度）将等于或大于视图的相应尺寸（减去填充）。

• contain：均匀缩放图像（保持图像的纵横比 比例），以便图像的两个尺寸（宽度和高度） 等于或小于视图的相应尺寸 （减去填充）。

• stretch：独立缩放宽度和高度，这可能会改变src的纵横比。

• 重复：重复图像以覆盖视图的框架。图像将保持其大小和纵横比，除非它大于视图，在这种情况下，它将均匀缩小，以便包含在视图中。

• center：使图像在视图中沿两个维度居中。如果 图片比视图大，统一缩小，使其大小一致 包含在视图中。