加载电影数据问题



  • import React, { Component } from 'react';
    import {
      
      AppRegistry,
      StyleSheet,
      Image,
      Text,
      View
    } from 'react-native';
    
    var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
    var MOCKED_MOVIES_DATA = [{title: '标题', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},];
    
    
    class AwesomeProject extends Component {
    
    
      constructor(props) {
        super(props);   
        this.state = {
          movies: null,  
        };
    
      }
    
        向服务器请求数据
        ComponentDidMount() {
          this.fetchData();
        }
    
        为组件添加fetchData函数
        fetchData() {
    
        fetch(REQUEST_URL)
          .then((response) => response.json())
          .then((responseData) => {
            this.setState({
              movies: responseData.movies,
            });
          })
          .done();
    
      }
    
      render() {
        var movie = MOCKED_MOVIES_DATA[0];
        if (!this.state.movies) {
          return this.renderLoadingView();
        }
        var movie = this.state.movies[0];
        return this.renderMovie(movie);
    
       
      }
    
    //还没有加载完的视图
      renderLoadingView() {
        return (
          <View style={styles.container}>
            <Text>
              正在加载电影数据……
            </Text>
          </View>
        );
      }
    
      renderMovie(movie) {
        return (
          <View style={styles.container}>
            <Image
              source={{uri: movie.posters.thumbnail}}
              style={styles.thumbnail} />
            <View style={styles.rightContainer}>
              <Text style={styles.title}>{movie.title}</Text>
              <Text style={styles.year}>{movie.year}</Text>
            </View>
          </View>
    
        );
      }
    }
    
    var styles = StyleSheet.create({
      container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      thumbnail: {
        width: 53,
        height: 81,
      },
      rightContainer: {
        flex: 1,
      },
      title: {
        fontSize:20,
        marginBottom: 8,
    
        textAlign: 'center',
    
      },
      year: {
        textAlign: 'center',
      },
    
    });
    
    
    
    AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
    
    

    按照教程的来的,一直卡在这,请问是什么问题0_1474336773982_Simulator Screen Shot 2016年9月20日 上午9.59.25.png


  • administrators

    试一下你能否用浏览器访问这个json文件,可能需要翻墙
    还有,你的fetchdata需要绑定this



  • @sunnylqm 可以访问 就是一大串json数据



  • @L_Sovereign 说:

    movies

    renderMovie要bind this


登录后回复