Javascript 从API调用进行图像渲染-React Native

我有一个平面列表，其中我正在运行来自纽约时报的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;

import React，{Component}来自“React”；
从“react native”导入{样式表、文本、视图、图像、平面列表}
从“/src/BookItem”导入BookItem
从“/src/API”//函数导入fetchBooks以调用API
类NYT扩展组件{
建造师（道具）{
超级（道具）；
this.state={data:[]}；
}
componentDidMount（）{
这个._refreshData（）；
}
_renderItem=（{item}）=>{
返回(
);
}
_AddKeyBooks=书籍=>{
//从纽约时报获取API响应
//并向对象添加一个键属性
//用于渲染
归还图书。地图（图书=>{
返回Object.assign（book，{key:book.title}）
});
};
_刷新数据=（）=>{
fetchBooks（）。然后（books=>{
this.setState（{data:this.\u addkeystooks（books）}）
});
};
render（）{
返回
}
}
const styles=StyleSheet.create({
continer：{
弹性：1，
加油站：22
}
});
出口默认纽约时报；

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

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;

import React，{Component}来自“React”；
从“react native”导入{样式表、文本、视图、图像、列表视图}；
类BookItem扩展组件{
render（）{
返回(
//不从API渲染图像
{this.props.author}
{this.props.title}
);
}
}
const styles=StyleSheet.create({
书目：{
flexDirection:“行”，
背景颜色：“FFFFFF”，
边框底部颜色：“AAAAA”，
边界宽度：2，
填充：5，
身高：175
},
封面：{
弹性：1，
身高：150，
宽度：150，
resizeMode：“包含”
},
信息：{
弹性：3，
对齐项目：“柔性端”，
flexDirection:“列”，
对准自己：“居中”，
填充：20
},
作者：{fontSize:18}，
标题：{fontSize:18，fontWeight:“粗体”}
});
导出默认账簿项目；

---

我相信我在React Native上使用的书可能已经过时了，因为我似乎不太理解fb发布的文档

在react native中，要渲染来自外部源的图像，您需要提供以下内容：

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

因此，您应该将您的

图像

的

源文件

道具编辑为

---

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

我应该补充的是，我已经将图像的道具更改为this.props.book_图像，如api中所示，但仍然没有运气。也许是我的风格？我可以在react DevTools中看到图像url非常感谢！本机的一些旧资源没有关于图像渲染的更新信息