Как передать URL-адрес изображения другому компоненту в качестве реквизита?

Это мой основной код компонента «Приложение»: - Я сделал набор mockbook, который я передаю компоненту «Bookitem» для целей отображения, я передаю реквизиты автора, заголовок и URL-адрес обложки (URL-изображение) для цели рендеринга в «FlatList» .Но мое изображение не загружается, но автор и заголовок работают правильно, как только я удаляю тег «Изображение».

import React, {Component} from 'react';
import {StyleSheet, Text, View, FlatList, Image} from 'react-native';
import Bookitem from "./Bookitem";

const mB = [
  {
    rank: 1,
    title: "Gathering Prey",
    author: "John Sanford",
    image : "https://du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9780399168796.jpg"
  },
  {
    rank: 2,
    title: "Memory Man",
    author: "David Baldacci",
    image : "https://du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9781455586387.jpg"
  }
];

export default class App extends Component {
  constructor(props){
    super(props);
    this.state={data : this.addKeystoBooks(mB)};
  }

addKeystoBooks = books => {
  return books.map(book => {
     return Object.assign(book,{key: book.title});
  })
}



_renderitem = ({item}) => {
  return(
  <Bookitem 
    coverURL = {item.image}
    author = {item.author}
    title = {item.key} 
   /> 
  );
};


render() {

    return <FlatList
         data={this.state.data}
         renderItem={this._renderitem} />;
  }
}

const styles = StyleSheet.create({
  container: {
     flex :1,
     padding : 22
  }
});

Это мой компонент Bookitem: -

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default class book extends Component {


    render(){
        return(

        <View style = {styles.container}>
          <View style = {styles.info}>
            <Image style={styles.cover} source ={{uri : "https://du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9780399168796.jpg"}} />
             <Text style = {styles.author}>{this.props.author}</Text>
             <Text style ={styles.title}>{this.props.title}</Text>
          </View>
        </View>

        )
    }
}

const styles = StyleSheet.create(
    {
       container : {
           flexDirection: "row",
           backgroundColor:"#FFF85C",
           borderBottomColor:"#AAAAAA",
           borderBottomWidth: 2,
           padding: 5,
           height: 175
       },
       cover : {
           flex:1,
           resizeMode:"contain",
           height: 150,
           width: 150
       },
       info:{
           flexDirection: "column",
           alignItems: "flex-end",
           flex: 3,
           alignSelf:"center",
           padding: 20
       },
       author: {
           fontFamily: "Lobster-regular",
           fontSize: 20
       },
       title : {
           fontSize: 23,
           fontFamily: "Lobster-Regular" 
       }
    }
)

Как я могу передать imageURL в качестве реквизита??


person Huzaifa Vakil    schedule 23.01.2019    source источник
comment
Вы не видите this.props.coverURL в своем компоненте ``‹Book /›`?   -  person johnborges    schedule 23.01.2019
comment
Да!! Я пробовал это несколькими способами, любая помощь будет оценена   -  person Huzaifa Vakil    schedule 23.01.2019
comment
Одна вещь, которую я замечаю, это ошибка сертификата с доменом, на котором размещено изображение. Это может быть причиной того, что изображение не загружается.   -  person johnborges    schedule 23.01.2019
comment
Должен ли я использовать локально сохраненные изображения вместо использования URL-адреса изображения?   -  person Huzaifa Vakil    schedule 23.01.2019
comment
Я бы попробовал это в первую очередь. Убедитесь, что вы можете передать coverURL в качестве реквизита, используя статическое локальное изображение, а затем устраните проблему с сертификатом для URL-адреса удаленного изображения.   -  person johnborges    schedule 23.01.2019


Ответы (1)


Итак, было несколько проблем с вашим кодом:

  • Вы забыли импортировать Image в файл Bookitem.
  • Похоже, что ваши URL-адреса имеют недействительный сертификат SSL, поэтому вы не можете запросить их через HTTPS. Изменение протокола на HTTP позволяет их загружать и отображать.

Ниже ваш код с необходимыми исправлениями:

App.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, FlatList, Image } from 'react-native';
import Bookitem from "./Bookitem";

const mB = [
  {
    rank: 1,
    title: "Gathering Prey",
    author: "John Sanford",
    image: "http://du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9780399168796.jpg"
  },
  {
    rank: 2,
    title: "Memory Man",
    author: "David Baldacci",
    image: "http://du.ec2.nytimes.com.s3.amazonaws.com/prd/books/9781455586387.jpg"
  }
];

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { data: this.addKeystoBooks(mB) };
  }

  addKeystoBooks = books => {
    return books.map(book => {
      return Object.assign(book, { key: book.title });
    })
  }



  _renderitem = ({ item }) => {
    return (
      <Bookitem
        coverURL={item.image}
        author={item.author}
        title={item.key}
      />
    );
  };


  render() {

    return <FlatList
      data={this.state.data}
      renderItem={this._renderitem} />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 22
  }
});

Bookitem.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default class book extends Component {
  render() {
    return (
        <View style = {styles.container}>
          <View style = {styles.info}>
            <Image style={styles.cover} source={{ uri: this.props.coverURL }} />
             <Text style = {styles.author}>{this.props.author}</Text>
             <Text style ={styles.title}>{this.props.title}</Text>
          </View>
        </View>

    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flexDirection: 'row',
      backgroundColor: '#FFF85C',
      borderBottomColor: '#AAAAAA',
      borderBottomWidth: 2,
      padding: 5,
      height: 175,
    },
    cover: {
    //   flex: 1,
      resizeMode: 'contain',
      height: 150,
      width: 150,
    },
    info: {
      flexDirection: 'column',
      alignItems: 'flex-end',
      flex: 3,
      alignSelf: 'center',
      padding: 20,
    },
    author: {
      fontSize: 20,
    },
    title: {
      fontSize: 23,
    },
  }
);

Вот как это должно выглядеть

person Bruno Eduardo    schedule 23.01.2019
comment
Спасибо большое за вашу помощь !! Это решило мою проблему - person Huzaifa Vakil; 23.01.2019
comment
Я не могу использовать локальный образ! Я сохранил данные в виде файла .json и изображения prop = ./assets/image.jpg, но когда я передал его в качестве реквизита для ‹Image›, НО когда я использую изображение с сервера, например books/9781455586387.jpg Итак, как я могу принять локальное изображение @BrunoEduardo - person DevAS; 25.09.2019
comment
@DevAS из документации RN При передаче объекта общая форма имеет вид {uri: строка, ширина: число, высота: число, масштаб: число}. Попробуйте передать исходную поддержку как source={{ uri: './assets/image.jpg' }}. - person Bruno Eduardo; 25.09.2019