Wiederverwendbare Schaltfläche mit Image-Tag (React Native)

Question

Ich möchte diesen Codeabschnitt in eine wiederverwendbare Komponente verwandeln, so dass ich nicht das gleiche Ding 5 Mal schreiben muss.

<TouchableOpacity onPress={console.log('pressed')}> 
    <Image 
    source={require('../img/button_australia.png')} 
    /> 
</TouchableOpacity> 

Die neue Komponente ich dies gemacht zu spiegeln ist wie folgt:

import React from 'react'; 
import { Image, TouchableOpacity } from 'react-native'; 

const ImgButton = ({ onPress, img }) => { 

return (
    <TouchableOpacity onPress={onPress}> 
    <Image 
     source={require(img)} 
    /> 
    </TouchableOpacity> 
); 
}; 

export { ImgButton }; 

Nach dem Import dieser Komponente ImgButton ich es mit diesem Code-Block nennen:

<ImgButton 
    onPress={console.log("pressed")} 
    img={'../img/button_australia.png'} 
    /> 

ich das bekommen error: "Requiring unbekanntes Modul '../img/button_australia.png'"

Ich nehme an, ich bin wron gegangen Wenn ich die Saite als Stütze hinlege, aber von den Beispielen, die ich gesehen habe, sehe ich nicht, was mit dem, was ich getan habe, nicht stimmt. Danke :)

Answer 1

Wie in this react-native issue diskutiert, ist es nicht möglich, require Assets oder Javascript-Module mit dynamisch generierten Namen, z. Variablen.

Dies liegt daran, dass der Package React Native (und import) Anweisungen verwendet, um die Modul- und Asset-Bundles zur Kompilierungszeit zu generieren, sodass der Wert der Variablen nicht bekannt ist.

Der einfachste Weg ist es, nur die Bildquelle direkt an die Komponente zu übergeben:

<ImgButton 
    onPress={console.log("pressed")} 
    img={require('../img/button_australia.png')} 
/>