Question

我最近开始学习React Native。没有很多JavaScript知识。我正在关注此Tutorial，目前我无法使用以下代码获取任何图像。任何人都可以指导我在这里缺少什么。

'use strict'

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

var REQUEST_URL = 'https://www.googleapis.com/books/v1/volumes?q=subject:fiction';
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        padding: 10
    },
    thumbnail: {
        width: 53,
        height: 81,
        marginRight: 10
    },
    rightContainer: {
        flex: 1
    },
    title: {
        fontSize: 20,
        marginBottom: 8
    },
    author: {
        color: '#656565'
    },
    separator: {
        height: 1,
        backgroundColor: '#dddddd'
    },
    listView: {
        backgroundColor: '#F5FCFF'
    },
    loading: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
});
class BookList extends Component {
    //var book = FAKE_BOOK_DATA[0];
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2
            })
        };
    }
    componentDidMount() {
        this.fetchData();
    }
    fetchData() {
        fetch(REQUEST_URL)
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData.items),
                    isLoading: false
                });
            })
            .done();
    }
    render() {
        if (this.state.isLoading) {
            return this.renderLoadingView();
        }
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderBook.bind(this)}
                style={styles.listView}
            />
        );
    }
    renderLoadingView() {
        return (
            <View style = {styles.loading}>
                <ActivityIndicatorIOS
                    size = 'large' />
                <Text>
                    Loading books...
                </Text>
            </View>
        )
    }
    renderBook(book) {
        return (
            <TouchableHighlight>
                <View>
                    <View style={styles.container}>
                        <Image
                            source={{uri: book.volumeInfo.imageLinks.thumbnail}}
                            style={styles.thumbnail} />
                        <View style={styles.rightContainer}>
                            <Text style={styles.title}>{book.volumeInfo.title}</Text>
                            <Text style={styles.author}>{book.volumeInfo.authors}</Text>
                        </View>
                    </View>
                    <View style = {styles.separator} />
                </View>
            </TouchableHighlight>
        );
    }
}
module.exports = BookList;

Answer 1

检查Image.source的uri是否有效。

在renderBook内console.log(book.volumeInfo.imageLinks.thumbnail)之前添加一行return，看看它是否返回了正确的图片网址以及是否可以在浏览器中访问该网址。

Answer 2

检查图像是http：//还是https：//。如果您使用的是iOS，则需要使用https。

Answer 3

有时图像uri内的空间会使图像不可见。例如，source={require('../Images/logo first.png')}尽管会加载，但会丢失。如果是这样，请删除空格，例如将图像名称更改为logo-first.png并命名为abracadabra！就在那里

React Native图片不可见

3 个答案: