React Native 中的图像表

Question

知道如何在本机反应中使用图像表吗？例如，如果我有这样的图像表，有没有一种方法可以定义框架尺寸并重复使用单个图像来显示多个图标？

类似问题：How can I use my spritesheet of icons in react native?

找到了使用ImageBackground的方法：crop an image of icons

探索其他选项。

Answer 1

作为解决方案：

您可以将您的图像 (jpg/png/jpeg) 转换为 SVG 文件，然后使用该 SVG 创建一个 react 组件以在您的 React Native 应用程序上使用。

说明

第一步 使用转换器工具将您的图像转换为 SVG。你也可以使用pngtosvg等在线网站

第二步 使用 react-svgr 或 svg2jsx 等在线工具将 SVG 转换为有效组件

第三步 假设您得到以下组件：

import * as React from "react"
import Svg, { Path } from "react-native-svg"

function SvgComponent(props) {
  return (
    <Svg width={48} height={1} xmlns="http://www.w3.org/2000/svg" {...props}>
      <Path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
    </Svg>
  )
}

export default SvgComponent

现在，将其作为常规组件导入您的应用程序。