概述

ListView作为核心组件之一，主要用于高效地显示一个可以垂直滚动的变化的数据列表。经过自定义组装，我们还可以用它实现九宫格等页面效果。在React Native中，使用ListView组件至少需要两个属性：DataSource和renderRow。DataSource是需要渲染界面的数据源，renderRow是根据数据源的元素返回的可渲染的组件，即ListView的一行。在React Native中，最基本的使用方式就是创建一个ListView.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源来实例化一个ListView组件，并且定义它的renderRow回调函数，这个函数返回ListView的一行作为一个可渲染的组件。例如，官网提供的ListView示例：

constructor(props) {
  super(props);
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  this.state = {
    dataSource: ds.cloneWithRows(['第一行', '第二行', '第三行']),
  };
}
//省略…
render() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData}</Text>}
    />
  );}

属性

ListView组件主要有两个属性：dataSource和renderRow。其他常用的属性如下： dataSource 数据源 renderRow ListView渲染的每一item view initialListSize 初始渲染item的个数 pageSize 每次事件循环（每帧）渲染的行数 onEndReachedThreshold 调用onEndReached之前的临界值，单位是像素 onEndReached 当所有的数据都已经渲染过，并且列表被滚动到距离最底部不onEndReachedThreshold个像素的距离时调用

获取网络数据渲染界面

从现在开始，我们将实现一个从网络获取数据并使用ListView控件渲染界面的过程。效果如下：

1，创建构造器

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

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

由于dataSource是弱类型，所以不用声名类型，重点看ListView实例化的部分。rowHasChanged是ListView必须要实现的一个function，否则会报错。一般我们会使用下面的简洁写法：

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

2，处理componentDidMount回调

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

当网络返回数据之后，我们需要对dataSource进行通知更新操作。

3，渲染单个Cell视图

ListView界面由一个一个子视图组成，我们需要在render的时候渲染子视图，通常为了代码维护的方便，我们会将子视图通过自定义为视图使用。

renderCell(cellData) {
       return (
           <View style={styles.cellContainer}>
               <Image
                  //  source={{uri:cellData.pic}}
                  source={require('./image/defalt_image.png')}
                   style={styles.thumbnail}
               />
               <View style={styles.itemCellView}>
                   <Text numberOfLines={1} style={styles.title}>{cellData.title}</Text>
                   <Text numberOfLines={1} style={styles.id}>{cellData.actor}</Text>
               </View>
           </View>
       );
   }

}

4，ListView渲染整个界面

使用ListView渲染整个界面。

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

以下为全部代码：

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

注：如果你读取的是本地的数据，可以通过require获取，例如：

let data=require('./data/list.json');
      this.setState({
          dataSource:this.state.dataSource.cloneWithRows(data.list),
      });

附：ListView示例代码

React Native控件之ListView

概述

属性

获取网络数据渲染界面

1，创建构造器

2，处理componentDidMount回调

3，渲染单个Cell视图

4，ListView渲染整个界面