ReactNative使用ListView加载网络数据

1.首先，先写一个类DemoProject，继承Component
紧接着，为他写一个构造器

     constructor(props) {
         super(props);
         this.state = {
             dataSource: new ListView.DataSource({
                 rowHasChanged: function(row1, row2) {return row1 !== row2},
             }),
             loaded: false,
         };
     }

我们在构造器中声明了一个成员变量state，并为它定义了两个属性，dataSource和loaded

由于是弱类型语言，所以不用声名类型，重点看ListView实例化的部分，这段代码

 dataSource: new ListView.DataSource({
                 rowHasChanged: function(row1, row2) {return row1 !== row2},
             })

rowHasChanged是ListView必须要实现的一个function，否则会报错，当然也可以采用lambda表达式的写法，

rowHasChanged: (row1, row2) => row1 !== row2

这样的写法使得代码更简洁。


2.Component有一个回调函数componentDidMount（），它在所有UI组建加载完成后会被调用，类似于Android中Activity生命周期的onCreate，我们在它被回调的时候发起网络请求，

     componentDidMount(){
	    this.fetchData();
     }

fetchData方法是我们自定义的请求网络的方法

     fetchData() {
         fetch(REQUEST_URL)
             .then((response) => response.json())
             .then((responseData) => {
				 console.log(responseData);
                 this.setState({
                     dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
                     loaded: true,
                 });
             }).catch(function(e){		 

			 })
             .done();
     }

有关fetch语句，详细可以看http://www.cnblogs.com/parry/p/using_fetch_in_nodejs.html
这里需要注意的是，console.log(responseData);这行代码，你可以在AndroidStudio的控制台下看到打印出来的信息，是一段json格式的数据，其中有一个key是movies，它的值是一段JsonArray，我们通过responseData.movies的方式取得movies的值，将它赋值给成员变量dataSource

this.state.dataSource.cloneWithRows(responseData.movies)
//这段代码的意思是填充ListView中的数据
dataSource: this.state.dataSource.cloneWithRows(responseData.movies)
//这段代码的意思是将填充好数据的ListView对象的句柄指向成员变量dataSource，当然也可以称之为引用。

3.再写一个方法，用于返回单行数据，

     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>
         );
     }

其中{movie.year}等，都是2中console.log(responseData)看到的服务器返回的json数据的key

4.render()方法返回整个UI

 return (
             <ListView
                 dataSource={this.state.dataSource}
                 renderRow={this.renderMovie}
                 style={styles.listView}
             />
         );

只能返回只有一个根节点的组建，不能返回多个，上面代码中，ListView中的三个属性都是原生属性，将我们实例化并且填充好数据的ListView赋值给dataSource
dataSource={this.state.dataSource}
将renderMovie方法的返回值赋值给renderRow，不做过多解释。

以下是全部代码

import React, {
    Component,
} from 'react';

import {
     AppRegistry,
     Image,
     StyleSheet,
     Text,
     View,
     ListView,
 } from 'react-native';


 var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';


 class DemoProject extends Component
 {
     constructor(props) {
         super(props);
         this.state = {
             dataSource: new ListView.DataSource({
                 rowHasChanged: (row1, row2) => row1 !== row2,
             }),
             loaded: false,
         };
     }

     componentDidMount(){
         this.fetchData();
     }

     fetchData() {
         fetch(REQUEST_URL)
             .then((response) => response.json())
             .then((responseData) => {
				 console.log(responseData);
                 this.setState({
                     dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
                     loaded: true,
                 });
             }).catch(function(e){

			 })
             .done();
     }

     render() {
         if (!this.state.loaded) {
             return this.renderLoadingView();
         }

         return (
             <ListView
                 dataSource={this.state.dataSource}
                 renderRow={this.renderMovie}
                 style={styles.listView}
             />

         );
     }

     renderLoadingView()
     {
         return (<View style={styles.container} >
                 <Text>Loading movies......</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',
     },
     rightContainer: {
         flex: 1,
     },
     title: {
         fontSize: 20,
         marginBottom: 8,
         textAlign: 'center',
     },
     year: {
         textAlign: 'center',
     },
     thumbnail: {
         width: 53,
         height: 81,
     },
     listView: {
         paddingTop: 20,
         backgroundColor: '#F5FCFF',
     },
 });
 AppRegistry.registerComponent('AwesomeProject', () => DemoProject);