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>
);
};
您可以在图像标签内使用resizeMode。
例如
<Image resizeMode={"center"} source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}/>
确定当框架与原始图像尺寸不匹配时如何调整图像大小。默认覆盖。
cover:均匀缩放图像(保持图像的长宽比) 这样图像的两个尺寸(宽度和高度)将等于或大于视图的相应尺寸(减去填充)。
contain:均匀缩放图像(保持图像的纵横比 比例),以便图像的两个尺寸(宽度和高度) 等于或小于视图的相应尺寸 (减去填充)。
stretch:独立缩放宽度和高度,这可能会改变src的纵横比。
重复:重复图像以覆盖视图的框架。图像将保持其大小和纵横比,除非它大于视图,在这种情况下,它将均匀缩小,以便包含在视图中。
center:使图像在视图中沿两个维度居中。如果 图片比视图大,统一缩小,使其大小一致 包含在视图中。