Reactネイティブイメージが表示されない

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の前に追加して、正しい画像URLが返されているか、ブラウザでURLにアクセスできるかどうかを確認してください。