javascript - 来自 API 调用的图像渲染 - React Native

Question

我有一个平面列表，我在其中运行来自 NYT 的 API 调用。我能够呈现我需要的每本书的信息，但我无法通过 API 调用呈现图书图像。

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;

上面的代码没有运行任何错误，但我不确定我是否在下面的 BookItem.js 代码中添加了正确的 Prop

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;

我相信我在 React Native 上使用的书籍可能与图像渲染方式已经过时，而且我似乎不太了解 fb 似乎发布的文档。

Answer 1

在 react-native 中，要渲染来自外部源的图像，您需要提供一些类似的东西；

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

因此，您应该将Image 的source 属性编辑为；

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