通过API调用渲染图像-React Native

Question

I have a flatlist where I am running an API call from the NYT. I am able to render the information of each book I need but I am having trouble rendering the book image from the API call.

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

import BookItem from "./src/BookItem"
import fetchBooks from "./src/API" //function to call api


class NYT extends Component {
    constructor(props){
        super(props);
        this.state = { data: [] };
    }

    componentDidMount() {
        this._refreshData();
    }

    _renderItem = ({item}) => {
        return (
            <BookItem
                coverURL = {item.book_image}
                title= {item.key}
                author={item.author}
            />
        );
    }

    _addKeysToBooks = books => {
        //Takes the API response from the NYTimes
        //and adds a key property to the object
        //for rendering
        return books.map(book => {
            return Object.assign(book, {key: book.title})
        });
    };

    _refreshData = () => {
        fetchBooks().then(books => {
            this.setState({ data: this._addKeysToBooks(books)})
        });
    };

    render(){
        return <FlatList data = {this.state.data}
        renderItem={this._renderItem} />
    }
}

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

export default NYT;

The above code does not run any errors but I am not sure if I am adding the proper props to the BookItem.js code below

import React, { Component } from "react";

import { StyleSheet, Text, View, Image, ListView } from "react-native";


class BookItem extends Component {
    render(){
        return (
            <View style = {styles.bookItem}>
                <Image style  = {styles.cover} source = {this.props.cover_URL} /> //does not render the image from API
                <View style = {styles.info}>
                    <Text style = {styles.author}>{this.props.author}</Text>
                    <Text style = {styles.title}>{this.props.title}</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    bookItem: {
        flexDirection: "row",
        backgroundColor: "#FFFFFF",
        borderBottomColor: "#AAAAAA",
        borderBottomWidth: 2,
        padding: 5,
        height: 175
    },
    cover: {
        flex: 1,
        height: 150,
        width: 150,
        resizeMode: "contain"
    },
    info: {
        flex: 3,
        alignItems: "flex-end",
        flexDirection: "column",
        alignSelf: "center",
        padding: 20
    },
    author: { fontSize: 18 },
    title: {fontSize: 18, fontWeight: "bold"}
});
export default BookItem;

I believe the books I am using on React Native might be out of date with how an image renders and I do not seem to quite grasp the docs fb seems to put out.

Answer 1

In react-native, to render images from external sources you need to provide something along the lines;

{ uri: 'http://example.com/example.png }

Therefore you should edit your Image 's source prop into;

source={{ uri: this.props.cover_URL }}