Question

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

select  *
from    @t t1
outer apply (
    select  state as PrimaryLocationState
    from    @t t2
    where   t1.doctorid = t2.doctorid
    and     primarylocation = 'Y'
) pl

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

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;

我相信我在React Native上使用的书籍可能会过时，因为图像呈现的方式和我似乎并没有完全掌握fb似乎推出的文档。

Answer 1

在react-native中，要从外部源渲染图像，您需要提供一些东西;

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

因此，您应该将Image的{{1}}道具修改为

source

API调用的图像渲染 - React Native

1 个答案: