Bild erfordert in reagieren-native 0.14.2

Question

Dies funktioniert mein Code Doing

<Image 
source={require('../../assets/images/music_star.png')} 
style={styles.musicStar} 
/> 

fein Aber diese

let imgSource = '../../assets/images/music_star.png'; 
<Image 
source={require(imgSource)} 
style={styles.musicStar} 
/> 

Ich erhalte eine Fehlermeldung einen Fehler gibt mir zu tun:

unbekannt Erfordern Modul "../../assets/images/music_star.png"

Was mache ich falsch? Wie benötigt man Bilder, die in einer Variablen in reaktionseigenem 0.14.2 gespeichert sind?

Answer 1

Sie können mehr in the docs aber im Grunde, um lesen für das der Bildnamen zu arbeiten, erfordern hat statisch bekannt sein:

// GOOD 
<Image source={require('./my-icon.png')} /> 

// BAD 
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive'; 
<Image source={require('./' + icon + '.png')} /> 

// GOOD 
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png'); 

Um von Eltern auf das Kind ein Bild übergeben, Sie sollten es in der Eltern erfordern:

/** 
* The entry point for the iOS app. 
*/ 
import React, { 
    AppRegistry, 
    Component, 
    Image, 
    View, 
} from 'react-native'; 

class Child extends Component { 
    render() { 
    return (
     <Image source={this.props.image} /> 
    ) 
    } 
} 

export default class Parent extends Component { 
    render() { 
    return (
     <View> 
     <Child image={require('./test.png')} /> 
     </View> 
    ); 
    } 
} 

AppRegistry.registerComponent('App',() => Parent);