Beim Testen von React Native wird versucht, einen Block mit weißem Text über einem Bild zu rendern. Stattdessen wird auf meinem Bild ein schwarzer Block mit weißem Text angezeigt. Nicht das, was ich erwartet hatte. Wie rendert man einen Textblock mit transparentem Hintergrund?

Aktuelles Ergebnis

Render-Funktion

render: function(){
  return (
    <View style={styles.container}>
      <Image 
        style={styles.backdrop} 
        source={{uri: 'https://unsplash.com/photos/JWiMShWiF14/download'}}>
          <Text style={styles.headline}>Headline</Text>
      </Image>
    </View>
  );
)

Stylesheet-Funktion

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#000000',
    width: 320
  },
  backdrop: {
    paddingTop: 60,
    width: 320,
    height: 120
  },
  headline: {
    fontSize: 20,
    textAlign: 'center',
    backgroundColor: 'rgba(0,0,0,0)',
    color: 'white'
  }
});