Передача источника изображения в компонент - PullRequest
Новая
       42

Передача источника изображения в компонент

0 голосов
/ 14 ноября 2018

У меня есть файл main.js, который вызывает компонент Home, например 

 <Home width = {width} }/>

И мой компонент home имеет изображение типа 

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;


Изображение хранится локальнов папке ресурсов, к которой можно получить доступ require('../assets/Images/Houses/house6.jpeg');

Мой компонент должен вызываться несколько раз с использованием разных изображений.
Как передать путь к изображению в компонент Home. 

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

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Вы уже получили доступ к 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} />
0 голосов
/ 14 ноября 2018

Попробуйте это: 

class ParentClass extends Component {
   construct() {
      this.state = {
         images : [require('../path/to/image1.png'), require('../path/to/image2.png')]
      };
   }

   render = () => {
      // Iterate through this one...
      return(<Home width={width} source={this.state.images[i]});
   }
}

Вы не можете передать что-то динамическое в функцию require (). Читайте дальше здесь: реагирует на переменную собственного использования для файла изображения

...