在 React Native 中从精灵表渲染像素化精灵，而不会使跳板崩溃

Question

我想在具有最近邻升级的图像中渲染非动画像素艺术精灵。

我的图像看起来像这样，目前它渲染了整个精灵表：

<Image
  source={require("../assets/sheet.png")}
  style={{
    width: 30,
    height: 30
  }}

在 CSS 中，使用

background-size

、

background-position

和

image-rendering: pixelated

可以很简单地做到这一点。

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>
  );
};