在 Android 上使用 React Native 的图像的透明背景色

Question

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

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

这是现在的样子：

<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 而不是 react-native 导入我的 Image 组件。这就是为什么我无法设置背景颜色的原因，前者似乎忽略了它，但后者却没有。

如果您偶然发现类似的东西，请确保您从正确的包中导入组件：

import {Image} from 'react-native';

Answer 2

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

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

在 Android 上使用 React Native 的图像的透明背景色

Transparent backgroundColor for an Image using React Native on Android

android

react-native

react-native-android