[React Native]-使用ListView展示电影数据（Movie Fetcher）

准备

开发环境搭建，请移步搭建开发环境
我们用Flexbox来布局。如果你想了解更多，可以读读这篇文章。
React中的各种生命周期方法请参阅此文档
ListView组件请参阅此文档

开发

我们会创建一个简单的Movies应用，它可以获取25个上映中的电影，然后把他们在一个ListView中显示。
译注：本文的示例代码采用了ES6语法，可能和其他文档写法不一致。但React Native从0.18之后，新建项目默认已经采用了ES6语法，故我们推荐不熟悉ES6与ES5区别的朋友先读读这篇文章，另外还可以看看阮一峰老师的书

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,//引入ListView组件
} from 'react-native';
/*获取网络数据之前，可以先制造一些模拟数据练手，调整展现样式
*/
var MACKED_MOVIES_DATA=[
  {title:'Title',year:'2016',posters:{thumbnail: 'http://i.imgur.com/UePbdph.jpg'}}
];
//拉取真正的数据，源url
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
class SampleAppMovies extends Component {
  constructor(props) {
    super(props);
/*dataSource接口用来在ListView的整个更新过程中判断哪些数据行发生了变化。
你会注意到我们现在用到了this.state中的dataSource。
下一步就是在constructor生成的初始状态中添加一个空白的dataSource。
我们可以在state里用一个布尔型的属性(this.state.loaded)来判断数据加载是否已经完成了。
*/
    this.state = {
       dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  }
/*组件加载完毕之后，就可以向服务器请求数据。componentDidMount是React组件的一个生命周期方法，
它会在组件刚加载完成的时候调用一次，以后不再会被调用。*/
  componentDidMount() {
    this.fetchData();
  }
 /*为组件添加fetchData函数，你所需要做的就是在Promise调用链结束后执行this.setState({movies:data})。
在React的工作机制下，setState实际上会触发一次重新渲染的流程，
此时render函数被触发，发现this.state.movies不再是null。
注意我们在Promise调用链的最后调用了done() —— 这样可以抛出异常而不是简单忽略。*/
  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
          loaded: true,
        });
      })
      .done();
  }
  render() {
    if(!this.state.loaded){
      return this.renderLoadingView();
    }
    return(
      
    );
  }
 
  renderLoadingView() {
    return (
      
        
          Loading movies...
        
      
    );
  }
 
  renderMovie(movie) {
    return (
      
        
        
          {movie.title}
          {movie.year}
        
      
    );
  }
}
 /*创建单个电影样式对象
+---------------------------------+
|+-------++----------------------+|
||       ||        标题          ||
|| 图片  ||                      ||
||       ||        年份          ||
|+-------++----------------------+|
+---------------------------------+
*/
const 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',
  },
  listView: {
    paddingTop: 20,
    backgroundColor: '#F5FCFF',
  },
});
 
AppRegistry.registerComponent('SampleAppMovies', () => SampleAppMovies);

最终展示