Wie ein Svg-Bild auf der Vorderseite des Hintergrundbildes auf reagieren native?

Question

Ich möchte ein Svg-Bild auf der "vorderen Ebene" eines Hintergrundbildes rendern.

Wenn die Ansicht geladen wird, erscheint nur das Hintergrundbild, und ich erhalte keine Fehler. Wird das Bild gerade geladen (im Hintergrund des Hintergrunds)?

Hier ist, was ich bisher getan habe:

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    View, 
    Image, 
} from 'react-native'; 

import SVGImage from 'react-native-svg-image'; 


export default class ShowScreen extends Component { 

    render() { 
    return (
     <View style={styles.container}> 
     <Image 
     source={require('../img/image.jpg')} 
     style={styles.backgroundImage} 
     blurRadius={1}> 

      <View style={styles.content}> 
      <SVGImage 
      style={{ width: 80, height: 80 }} 
      source={{uri:'https://fluent-panda.appspot.com.storage.googleapis.com/dumbbell.svg'}}/> 
      </View> 
     </Image> 
     </View> 
    ); 
    } 



const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    }, 
    backgroundImage: { 
    flex: 1, 
    alignSelf: 'stretch', 
    width: null, 
    justifyContent: 'center', 
    }, 
    content: { 
    alignItems: 'center', 
    } 
}); 

Warum das Bild erscheint, nicht wahr? Ich benutze react-native.

Answer 1

hatte ein ähnliches Problem mit Text über Karte Komponenten hinzufügen und es wurde durch Zugabe von z-index: -1 auf das Rückenelement (in diesem Fall die Karte)