richiedendo immagine nella reagire nativo 0.14.2

Question

In questo modo il mio codice funziona bene

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

Ma facendo questo mi dà un errore

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

ottengo un errore:

richiedono sconosciuto modulo "../../assets/images/music_star.png"

Cosa sto facendo male? Come richiedere le immagini memorizzate in una variabile in react-native 0.14.2?

Answer 1

Puoi leggere altro in the docs ma in fondo, in modo per far funzionare tutto questo, il nome dell'immagine in richiedono deve essere conosciuta in modo statico:

// 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'); 

Per passare un'immagine di padre in figlio, dovresti richiederlo nel genitore:

/** 
* 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);