изображение не рендерится в нативной реакции

Question

Я пытаюсь получить URL-адрес изображения, он также успешно печатает его в консоли, но практически не выполняет рендеринг.

Примечание: Высота и ширина также успешно печатаются в консоли, ноэто не рендеринг. Пожалуйста, этот код ниже.

    constructor(props){
    super(props);
    this.state = {
    imgLink: '',
     };
    };

    fetchData = data => {
       var foo = data.items[0].snippet.thumbnails.default.url;
       this.setState({imgLink: foo});
       this.setState({height: 
       data.items[0].snippet.thumbnails.default.height});
       this.setState({width:  
       data.items[0].snippet.thumbnails.default.width});
        }


        render(){
         return(
          <Image
           style={{
           width:width,
           height:height,
           alignItems:'center',
           borderRadius:50 ,
           marginLeft:'auto',
           marginRight: 'auto',
           marginTop: 40,
           }}
           resizeMethod = "resize"
           onError={(e) => console.log(e.nativeEvent.error) }
           source={{uri: this.props.imgLink }}/>
           );
           }

Answer 1

Проблема

В ваших <Image методах ширины и высоты вы используете width и height без предыдущих объявлений.

---

Решение

Измените ваши <Image методы width и height, чтобы использовать значения из состояния компонента, как показано ниже:

<Image
    style={{
        width: this.state.width,
        height: this.state.height,
        alignItems: 'center',
        borderRadius: 50,
        marginLeft: 'auto',
        marginRight: 'auto',
        marginTop: 40,
    }}
    resizeMethod="resize"
    onError={(e) => console.log(e.nativeEvent.error)}
    source={{ uri: this.props.imgLink }} />

---

Бонус

Вам не нужновызовите thi.setState () несколько раз. Вы можете изменить функцию fetchData следующим образом:

fetchData = data => {
    var foo = data.items[0].snippet.thumbnails.default.url;
    this.setState({
        imgLink: foo,
        width: data.items[0].snippet.thumbnails.default.width,
        height: data.items[0].snippet.thumbnails.default.height
    });
}

Надеюсь, это поможет!