在React

Question

我提前为此处的代码转储道歉。我正在尝试使用Google Books API在React Native中构建iOS应用。但是，这些书的缩略图目前尚未在应用中显示。可能导致这种情况的一个想法可能是iOS中的http与https问题。虽然我并不积极（并且我不完全确定如何改变它来测试它）。有人可以告诉我为什么缩略图不会出现？

'use strict';
import React, {Component} from 'react'; 
import BookDetail from './BookDetail';

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

class BookList extends React.Component {
    constructor(props) {
       super(props);
       this.state = {
           isLoading: true,
           dataSource: new ListView.DataSource({
               rowHasChanged: (row1, row2) => row1 !== row2
       })
   };
}

componentDidMount() {
   this.fetchData();
   }

   fetchData() {
       fetch(REQUEST_URL[0])
       .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}>
            <ActivityIndicator
                size='large'/>
            <Text>
                Loading books...
            </Text>
        </View>
    );
}

// **** ISSUE OCCURS HERE (I THINK)

renderBook(book) {
   return (
        <TouchableHighlight onPress={() => this.showBookDetail(book)}  underlayColor='#dddddd'>
            <View>
                <View style={styles.container}>
                    <Image
                        source={{uri: book.volumeInfo.imageLinks.thumbnail}} // **NEED TO EDIT THIS
                        style={styles.thumbnail} />
                    <View style={styles.rightContainer}>
                        <Text style={styles.title}>{book.volumeInfo.title}</Text>
                        <Text style={styles.author}>{book.volumeInfo.authors}</Text>
                        <Text style={styles.price}>{'Lowest Available Price: ' + book.volumeInfo.price}</Text>
                    </View>
                </View>
                <View style={styles.separator} />
            </View>
        </TouchableHighlight>
   );
}

showBookDetail(book) {
   this.props.navigator.push({
       title: book.volumeInfo.title,
       component: BookDetail,
       passProps: {book}
   });

}

}

var REQUEST_URL = ['https://www.googleapis.com/books/v1/volumes?q=subject:fiction'];

var styles = StyleSheet.create({
    container: {
       flex: 1,
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: '#F1FBFF',
       padding: 10
   },
   separator: {
      height: 1,
      backgroundColor: '#dddddd'
   },
   thumbnail: {
       width: 53,
       height: 81,
       marginRight: 4
   },
   rightContainer: {
       flex: 1
   },
   title: {
       fontSize: 20,
       marginBottom: 4
   },
   author: {
       color: '#656565',
       marginBottom: 4
   }, 
   price: {
       color: '#E41B17'
   }
});


module.exports = BookList;

Answer 1

您的假设是正确的，Apple将阻止任何不安全的URL，使用https代替http。

尝试改用此行：

source = {{uri：'https'+ book.volumeInfo.imageLinks.thumbnail.substr（4）}}

这将为URL加上字符串