Questo funziona nessun problema:Reagire immagini native con i nomi dinamici
<Image source={require('./images/ace.png')} />
Ma questo:
var name = 'ace';
<Image source={require('./images/' + name + '.png')} />
Ho provato tutti i tipi di variazioni, ma restituisce sempre l'errore:
Richiede modulo sconosciuto "./images/ace.png". Se sei sicuro che il modulo è lì, prova a riavviare il packager.
Provare a utilizzare url
<Image
style={styles.img}
resizeMode={'contain'}
source={{uri: imageURL}}>
e in imageURL che potrebbe essere un URL
ad esempio
var imageURL = 'http://assets22.pokemon.com/assets/cms2/img/pokedex/full/702.png'
Che dire invece per le immagini locali visto che si tratta di un'app. Se ho appena un'immagine a './images/ace.png/ il comando uri non sembra funzionare. Non genera alcun errore ma semplicemente non visualizza l'immagine. – Hasen
Se sviluppi per iOS puoi usare il nome di asset da xcassets come uri (ad es .: source = {{uri: 'cuteCat' + contatore}}) –
In questo modo non funziona più. Controlla qui https://facebook.github.io/react-native/docs/images.html#content – Hasen
Come per reagire documenti nativi,
// 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');
<Image source={icon} />
Come su pre-dichiarando cosa è richiesto e lo uso in modo condizionale?
Al giorno d'oggi la soluzione, componente denominato Fila:
const Row = (props) => {
let employmentType;
// Set my own image component dynamically
if(props.SOME_CONDITION){
employmentType = <Image source={require('image!Driver')} style={styles.employeeLogo} />
}
else{
employmentType = <Image source={require('image!ANOTHERIMAGE')} style={styles.employeeLogo} />
}
return(
<View style={styles.row_container} elevation={2}>
{employmentType}
<Text style={styles.row_text}>{'../Assets/Images/' + props.PictureUrl + '.png'}</Text>
<Text style={styles.row_text}>{props.Fullname}</Text>
<Text style={styles.row_text}>{props.EmploymentType}</Text>
</View>
);
};
ho trovato in questo modo funziona nome var = require ('./ immagini/ace.png');