React-native failed propType для компонента изображения

Question

Я только начинаю с React-native и довольно хорошо разбираюсь в React для создания веб-приложений ... Я столкнулся с запутанной проблемой, которая никогда не возникала при работе с реакцией для Интернета.

В основном я представляю компонент, изображение которого динамически генерируется путем сопоставления массива объектов в его родительском компоненте.

export default class ImageComponent extends React.Component { 
    render() { 
    return (
     <Image source={this.props.source}/> 
    ); 
    } 
}; 

И его родительский компонент:

export default class MainComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     images:[ 
     { src: './src/images/1.png'}, 
     { src: '/src/images/2.png'}, 
     { src: './src/images/3.png'} 
     ] 
    } 
    } 

    render() { 
    let images = this.state.images.map((image) => { 
     return(<ImageComponent source={image.src} />); 
    }) 

    return (
     <View> 
     {images} 
     </View> 
    ); 
    } 
}; 

В тренажере устройства я получаю следующее сообщение об ошибке:

«Предупреждение: Не удалось propType: Invalid пропеллер 'источник', подаваемое«Image 'проверить метод рендеринга' BasicComponent ''

Имеет ли вы знаете, что здесь может быть?

Answer 1

Вы должны либо потребовать локальные активы, либо использовать объект с ключом uri.

Так как в MainComponent:

this.state = { 
    images:[ 
    require('./src/images/1.png'), 
    require('./src/images/2.png'), 
    require('./src/images/3.png') 
    ] 
} 

или BasicComponent:

return (
    <Image 
    source={{uri: this.props.source}} 
    /> 
);