reactjs - React Native 中的图像表

Question

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

类似的问题：如何在本机反应中使用我的图标精灵表？

找到了使用 ImageBackground 的方法：裁剪图标的图像

探索其他选择。

Answer 1

作为解决方案：

您可以将您的图像 (jpg/png/jpeg) 转换为 SVG 文件，然后使用此 SVG 创建一个反应组件以在您的 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

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