React Native - Ungültige Prop-Quelle an Bild übergeben

Question

Ich bin komplett neu zu native Dev reagieren, und ich versuche zu zeigen und <Image>. Ich halte diesen Fehler:

Warning: Failed prop type: Invalid prop source supplied to Image`

Hier ist, was ich habe: Erstens gibt es Liste aller Bilder in Projekt wie folgt definiert:

export const IMAGES = { 
    ScreenStart1: require('../../assets/img/app/startScreen/start1.jpg'), 
} 

Dies ist der Ansicht ist, die die Bildkomponente ruft :

import {IMAGES} from '../../shared/listOfImages' 


import FullScreenImage from '../../components/fullScreenImage' 

export default class StartScreen extends React.Component { 

    render(): React$Element<*> { 
    let src = IMAGES.ScreenStart1; 

    return (
     <View style={{flex: 1}}> 
     <FullScreenImage src="{src}"/> 
     </View> 
    ); 
    } 
} 

Schließlich wird die FullScreenImage Komponente:

//this displays image in full screen 
export default class FullScreenImage extends Component { 

    render(): React$Element<*> { 
    let src = this.props.src; 
    return (
     <Image source={src} style={fullScreenImageStyle.container} resizeMode='cover'> 
     </Image> 

    ); 
    } 
} 

Bitte kann mir jemand helfen?

Answer 1

Ich denke, Ihr Problem <FullScreenImage src="{src}"/> ist, das buchstäblich eine Zeichenfolge geht nach unten ‚{src}‘, wenn Sie eine Variable in einen String injizieren wollen Sie, dies zu tun haben:

<FullScreenImage src={`${src}`}/> 

Aber gibt es ein Grund, warum Sie nicht gerade tun?