content: /**
   * Sample React Native App
   * https://github.com/facebook/react-native
   * @flow
   */
  
  import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    ActivityIndicator,
    Image
  } from 'react-native';
  
  var API_KEY = '7waqfqbprs7pajbz28mqf6vz';
  var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
  var PAGE_SIZE = 25;
  var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;
  var REQUEST_URL = 'http://facebook.github.io/react-native/movies.json';//API_URL + PARAMS;
  var url = 'http://img0.tuicool.com/biemYnB.jpg!web';
  
  export default class CollectionView extends Component {
  
    constructor(props) {
      super(props);
      const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      this.state = {
        loaded : false,
        dataSource: ds.cloneWithRows(
          [
            {'name':'小王',age:'27'},{name:'小明',age:'29'},{name:'小明',age:'29'},{name:'小明',age:'29'},{name:'小明',age:'29'},{name:'小明',age:'29'},{name:'小明',age:'29'},{name:'小明',age:'29'}
          ]),
      }
    }
  
    componentDidMount(){
          this.fetchData();
    }
  
    fetchData() {
          fetch(REQUEST_URL)
          .then((response) => response.json())
          .then((responseData) => {
              console.log('request URL is :' + REQUEST_URL);
              this.setState({
                  dataSource : this.state.dataSource.cloneWithRows(responseData.movies),
                  loaded : true,
              });
          })
          .done();
      }
      render() {
  
          if (!this.state.loaded) {
              var view = this.renderLoadingView();
              return view;
          }
  
          return (
              <ListView
                dataSource={this.state.dataSource} 
                renderRow={this.renderMovie} 
                style={styles.listView}
              />
          );
      }
      renderLoadingView() {
          return (
              <View style={[styles.container]}>
                  <View style={styles.loading}>
                    <View style={{flex:1,flexDirection:'row',justifyContent:'center',alignItems:'center',flexWrap:'nowrap'}}>
                      <ActivityIndicator style={{marginRight:10}}/>
                      <Text style={styles.loadingText}>
                          Loading movies...
                      </Text>
                    </View>
                  </View>
              </View>
          );
      }
  
  
      renderMovie(movie) {
          return (
              <View style={[styles.container, styles.space,]}>
                  <Image source={{uri : url}} style={styles.thumbnail} />
                  <View style={styles.rightContainer}>
                    <Text style={styles.title}>{movie.title}</Text>
                    <Text style={styles.year}>{movie.releaseYear}</Text>
                  </View>
              </View>
          );
      }
  }
  
  
  
  var styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection : 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
    },
    instructions: {
      textAlign: 'center',
      color: '#333333',
      marginBottom: 5,
    },
    thumbnail : {
        width : 53,
        height : 81,
    },
    rightContainer : {
      flex : 1,
      paddingLeft : 5,
    },
    title : {
      fontSize : 20,
      marginBottom : 8,
      textAlign : 'left',
    },
    year : {
      textAlign : 'left',
    },
    loading : {
      backgroundColor : '#000000',
      opacity : 0.8,
      borderRadius : 8,
      padding : 20,
      height:100,
      // alignSelf : 'center',
    },
    loadingText : {
      color : '#ffffff',
      fontSize : 14,
      textAlign : 'center',
    },
    listView : {
        backgroundColor : '#F5FCFF',
    },
    space : {
        padding : 5,
        borderBottomWidth : 1,
        borderBottomColor : '#cccccc',
        borderStyle : 'solid',
        backgroundColor : '#ffffff'
    }
  });
  
  AppRegistry.registerComponent('CollectionView', () => CollectionView);
  