如何在 React Native 中使用我的图标精灵表？

问题描述

如何在 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 中没有 background position 属性。

解决方法

你尝试了吗

<ImageBackground />

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