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

Question

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

Answer 1

你尝试过吗

<ImageBackground />

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

Answer 2

您可以使用这个库，它也可以处理动画

rn-sprite-sheet

github.com/MiLeung/rn-sprite-sheet