如何在本机反应中使用我的图标精灵表？

Posted 2023-03-25

【中文标题】如何在本机反应中使用我的图标精灵表？

【英文标题】：How can I use my spritesheet of icons in react native?

【发布时间】：2021-07-01 15:21:36

【问题描述】：

如何在 react-native 中正确使用精灵表？还是人们通常单独加载图标而不使用精灵表？请注意，这不是动画精灵，只是纯图标。

例如，这是我的工作表...

这是一个图标的 css...

.Sprite 
  background-image: url(./assets/images/spritesheet.png);
  background-repeat: no-repeat;
  display: inline-block;

.IconMenu30px 
  width: 30px;
  height: 30px;
  background-position: -53px -5px;

我试着把它翻译成这样的 React Native...

<Image source=require("../assets/images/spritesheet.png") style=styles.menuIcon />

const styles = StyleSheet.create(
 menuIcon: 
    width: 30,
    height: 30,
  ,
)

但显然 React Native 中没有 背景位置 属性。

【参考方案1】：

你试过了吗

<ImageBackground />

这可能有助于解决您的问题

【讨论】：

是的，我做到了，但没有成功，所以我最终将精灵表中的图标分解为单独的文件，并将每个文件加载到包含我所有图像的全局 js 文件中。希望有更好的方法，但这可行，虽然乏味！