Übergeben von lokalen Bild-URI als Requisiten in react-native

Question

Ich versuche, die URI eines Bildes als Prop zu übergeben, so dass ich es mehrmals auf reaktiv-native verwenden kann. Diese aktuelle Lösung veranlasst mich jedoch, dass require Zeichenfolgenliterale verwenden sollte.

const ImageButton = ({ source }) => (
    <Image source={require({ source })} /> 
); 

ImageButton.propTypes = { 
    uri: PropTypes.string, 
}; 

Ich habe auch versucht uri als PropTypes.func erklärt und

<Image source={{ source }} /> 

tun, aber das Bild wird nicht angezeigt. Was ist die korrekte Umsetzung einer Image-Uri-Prop?

Answer 1

Sie müssen ein separates Objekt für die Anforderung von Bildern erstellen, da dies mit dynamisch definierten Strings nicht möglich ist.

Zum Beispiel:

const assets = { 
    imageButton: require('./assets/button.jpg'), 
}; 

const ImageButton = (source) => { 
    <Image source={assets[source]} /> 
} 

class MyComponent extends Component(props) { 
    render() { 
    return (
     <ImageButton source={'imageButton'} /> 
    ) 
    } 
}