如何调整ImageBackground组件(React Native)中的背景位置?

时间:2019-02-25 04:28:00

标签: react-native react-native-stylesheet

我有一个这样的图像作为资产seats.png(180 x 36像素),每个“座位”都是36x36像素图像:

This is My Image

我的代码:

<View style={styles.container}>
      <ImageBackground 
      style={styles.redSeat}
      source={seatsPng}
      resizeMode="cover"
      >
      </ImageBackground>
</View>

import EStyleSheet from 'react-native-extended-stylesheet';

export default EStyleSheet.create({
  container: {
    backgroundColor: '#333',
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 10,
    paddingRight: 10,
  },
  redSeat: {
    width: 36, 
    height: 36,
    left: 0 // I want to show only red seat on the display
  }
});

如何做到这一点,以便仅通过调整图像偏移(例如HTML / CSS中的背景位置)即可显示红色座位,黄色座位或紫色座位?上面的代码仅显示绿色座椅。

PS:我搜索了React-native github页面,我不敢相信这个问题被标记为已关闭,而开发人员没有提供解决方案。因此,如果将来有解决方案,我将打开此线程。 https://github.com/facebook/react-native/issues/12347

0 个答案:

没有答案