在 react-native 中加载图像作为道具

Question

so I have a customHeader component where I am trying to load images into like so

<Image source={props.logoImg} style={styles.icon} />

and on the page I'll pass in the prop like so

<CustomHeader 
     navigation={props.navigation} //call props.navigation in component
     primaryColor={primaryColor}
     coName={coName}
     logoImg={require('../content/...some image...'}
 /> 

This way it doesn't throw an error, but it doesn't load. I know it has something to do with passing it as a prop because I can load images straight into the screens. I'm just not sure what I'm doing wrong or what I'm missing here.

I have tried using the require inside of the component, but that throws an error at compile because react-native needs the images to be "required" at compile.

Answer 1

this should work

in the Wrapping component

<CustomHeader 

     imageUri={'../content/...some image...'}
 /> 

and then in the inner component

<Image source={require(props.imageUri)} />