React Native 图像不可见答案

【问题标题】：React Native image not visibleReact Native 图像不可见
【发布时间】：2016-08-21 07:09:03
【问题描述】：

我最近开始学习 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;

【问题讨论】：

您确定设置了Image.source 吗？尝试调试它或将 console.log 放在 return 之前。
好的，让我试试。

标签： javascript ios react-native

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：