kann nicht durch lokale Vermögenswerte iterieren in React india

Question

ich wie so ein Scroll von Bildern zu machen versuche:

renderIcons() 
{ 
    let activityImages= ['all','boat','camping','climbing','cycling','hiking','running','swimming','yoga']; 

    let icons = activityImages.map((image, index) => { 
     return (
      <TouchableWithoutFeedback key={index} onPress={() => {}}> 
       <View style={styles.imageWrap}> 
        <Image style={styles.imageDefault} source={require(`../../assets/activities/${image}.png`)} /> 
       </View> 
      </TouchableWithoutFeedback> 
     ); 
    }); 

    return icons; 
} 

Und in der Render-Methode:

render() { 

return (
    <View style={styles.container}> 
     <ScrollView 
      style={styles.scrollContainer} 
      horizontal={true} 
     > 
      {this.renderIcons()} 
     </ScrollView> 
    </View> 
); 

}

Jeder Die Elemente im Ordner "Assets" sind ein Bild mit dem entsprechenden Dateinamen.

Wenn ich dies ausführen, bekomme ich den Fehler: Requiring unbekanntes Modul "../../assets/activities/all.png".

Zuerst dachte ich, es den falschen Dateipfad war, aber wenn ich die Quelle des Bildes zu ändern: source={require('../../assets/activities/all.png')} />, all.png richtig 8 mal gemacht (Länge des Array) ohne Fehler. Ist jemand auf ein ähnliches Problem gestoßen?

EDIT:

Die beste Lösung hierfür ist wahrscheinlich ein Wörterbuch (Github issue und comment)

const iconsMap = {'burger-menu': require('../img/burger-menu.png')}; 
// this.props.icon = 'burger-menu' 
<Image src={iconsMap[this.props.icon} /> 

Answer 1

reagieren-native Nach docs, um für diese zu arbeiten, den Bildnamen in require muss 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'); 
<Image source={icon} />