Получение эскиза с помощью API Google Книг в React

Question

Я заранее прошу прощения за дамп кода. Я пытаюсь использовать API Google Книги для создания приложения для iOS в React Native. Тем не менее, миниатюры книг в настоящее время не отображаются в приложении. Одна из моих мыслей, которая может быть причиной этого, - это проблема http против https в iOS. Я не уверен, хотя (и я не совсем уверен, как изменить это, чтобы проверить это). Может кто-нибудь сказать мне, почему миниатюры не будут отображаться?

'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