Transparent backgroundColor für ein Bild mit React Native auf Android

Question

Ich habe ein Asset mit transparentem Hintergrund in unserer App verwendet. Wenn unter iOS die Einstellung backgroundColor: 'transparent' für die Image-Komponente wie erwartet funktioniert, wird sie unter Android immer mit einem hellgrauen Hintergrund gerendert.

In der Tat scheint backgroundColor-Wert auf Android vollständig ignoriert werden.

Dies ist, wie es jetzt aussieht:

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

Styles:

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

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

Answer 1

Ich erkannte, dass ich den Import meiner Image Komponente aus shoutem-ui statt react-native. Aus diesem Grund konnte ich keine Hintergrundfarbe einstellen, die von der ersten, nicht aber von der späteren ignoriert wird.

Wenn Sie auf etwas ähnliches stolpern, sollten Sie den componentes vom rechten Paket importieren:

import {Image} from 'react-native';