在Android上使用React Native的图像的透明backgroundColor

Question

我的应用程序上使用了透明背景资源。在iOS上，为Image组件设置backgroundColor: 'transparent'按预期工作，在Android上，它总是以浅灰色背景呈现。

事实上，在Android上似乎完全忽略了backgroundColor值。

这就是现在的样子：

<View style={styles.cardHeader}>
  <Image
    source={require('../assets/images/greeting.png')}
    style={styles.greetingImage} />
</View>

样式：

cardHeader: {
  alignSelf: 'stretch',
  backgroundColor: Color.GREY,
  paddingTop: 30,
  borderTopLeftRadius: 5,
  borderTopRightRadius: 5
},

greetingImage: {
  alignSelf: 'center',
  backgroundColor: 'transparent'
}

Answer 1

我意识到我正在从shoutem-ui而不是Image导入我的react-native组件。这就是为什么我无法设置背景颜色，前者似乎忽略了背景颜色，而不是后者。

如果您偶然发现类似内容，请务必从正确的套餐中导入组件：

import {Image} from 'react-native';

Answer 2

您还可以将StyleSheet.absoluteFillObject添加到您的容器中。

greetingImage: {
  ...StyleSheet.absoluteFillObject
  alignSelf: 'center',
  backgroundColor: 'transparent'
}