javascript - 将图像源传递给组件

Question

我有一个文件 main.js 调用了一个组件 Home 就像

 <Home width = {width} }/>

我的主页组件有一个像

这样的图像

class Home extends Component{
    render(){
        return(
            <View style = {{width: this.props.width/2,height:this.props.width/2 ,
                borderWidth:0.5,borderColor:'#dddddd'}}>
               <View style = {{flex : 1}}>
               <Image 
               style = {{flex:1,width:null,height:null,resizeMode:'cover'}}
               source = {require(this.props.source)} >
               </Image>
               </View>
               <View style ={{flex:1 , alignItems:'flex-start', 
               justifyContent:'space-evenly', paddingLeft: 10}}>
               <Text style = {{fontSize:14,color:'#b63838'}}> 5 bedroom </Text>
               <Text style = {{fontSize:12 , fontWeight:'bold'}}>North York</Text>
               <Text style = {{fontSize:12 , fontWeight:'bold'}}>$4000</Text>
               </View>
                </View>
        );
    }
}
export default Home;

图像存储在本地 Assets 文件夹中，可以通过require('../assets/Images/Houses/house6.jpeg');

我的组件必须使用不同的图像多次调用。
如何将图像路径传递给 Home 组件。

<Home width = {width} source = ??????/>

Answer 1

您已经在您的主页组件中访问了 this.props.source。如下所述，将您的图像导出到一个文件中，以便在任何组件中导入。

更新:

const images = {
    houseImage: require(‘../assets/Images/Houses/house6.jpeg’)
};


export default images;

主页组件

import Images from ‘@assets/images’;

<Image style = {{flex:1,width:null,height:null,resizeMode:'cover'}}  source={Images.houseImage} />