ReactNative中使用ListView

1.import添加listview的引用

import {
    StyleSheet,
    View,
    Text,
     Navigator,
    ListView,
    Image,
    TouchableOpacity,
    ActivityIndicator,
    RefreshControl,
} from 'react-native';

2.ListView的使用

ListView组件必须的两个属性是dataSource和renderRow。dataSource是列表的数据源，而renderRow则逐个解析数据源中的数据，然后返回一个设定好格式的组件来渲染。
在render()中，我们渲染一个ListView，在ListView的属性中，我们指定了dataSource和renderRow，这两个属性分别代表ListView的数据源和渲染的每一行。

dataSource

如果我们要创建一个数据源，最基本的方法就是创建一个ListView.DataSource数据源，然后通过cloneWithRows方法为其传递一个数组。
其中提供给数据源的rowHasChanged函数可以告诉ListView它是否需要重绘一行数据，即数据是否发生了改变，即在需要重绘界面的时候会进行判断，如果之前页面中的改行数据没有发生变化，则不再进行重绘，否则进行重绘。

renderRow

(rowData, sectionID, rowID, highlightRow) => renderable
该属性需要传入一个方法，该方法如上所示，他会从数据源中接受一条数据，以及他和他所在的section的Id，返回一个可渲染的组件来为这行数据进行渲染，默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。

3.其他属性

initialListSize number :

指定在组件刚挂载的时候渲染多少行数据。用这个属性来确保首屏显示合适数量的数据，而不是花费太多帧逐步显示出来。

onChangeVisibleRows function: (visibleRows, changedRows) => void

当可见的行的集合变化的时候调用此回调函数。visibleRows 以 { sectionID: { rowID: true }}的格式包含了所有可见行，而changedRows 以{ sectionID: { rowID: true | false }}的格式包含了所有刚刚改变了可见性的行，其中如果值为true表示一个行变得可见，而为false表示行刚刚离开可视区域而变得不可见。

pageSize number :

每次事件循环（每帧）渲染的行数。

renderRow function (rowData, sectionID, rowID, highlightRow) => renderable

从数据源(Data source)中接受一条数据，以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。
如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置。

下面直接贴上Demo代码

首先是目录结构

项目目录结构

service.js

/*
 * 服务URL
 */
module.exports = {
  //电影搜索
  movie_search: 'https://api.douban.com/v2/movie/search',
};

Utils.js

import React, { Component } from 'react';
/*!
 *
 * Util模块 React Native module
 * 主要提供工具方法
 *
 */
import Dimensions from 'Dimensions';

import {
  PixelRatio,
  ActivityIndicator
  } from 'react-native';

module.exports = {
  navigationHeight: 44,
  navigationBarBGColor:'#3497FF',
  statusBarHeight: 20,
  /*最小线宽*/
  pixel: 1 / PixelRatio.get(),

  /*屏幕尺寸*/
  size: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height
  },
  /**
   * 基于fetch的get方法
   * @method post
   * @param {string} url
   * @param {function} callback 请求成功回调
   */
  get: function(url, successCallback,failCallback){
    fetch(url)
      .then((response) => response.text())
      .then((responseText) => {
        successCallback(JSON.parse(responseText));
      })
      .catch(function(err){
        failCallback(err);
      });
  },
  /*loading效果*/
  loading: 
};

infoListView.js

'use strict'
import React, { Component } from 'react';
import Util from './common/util' ;
import ServiceURL from './common/service' ;
import {
    StyleSheet,
    View,
    Text,
     Navigator,
    ListView,
    Image,
    TouchableOpacity,
    ActivityIndicator,
    RefreshControl,
} from 'react-native';

export  default class Sample_InfoListView extends Component{
    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
           dataSource: ds.cloneWithRows([]),
           keywords: 'BBC',
           show: false,
           isRefreshing: false,
        }
    }
 
  render(){
    return(
        
        {
          this.state.show ?
            {
                        this.setState({isRefreshing: true});
                    setTimeout(() => {
                      this.setState({
                        isRefreshing: false,
                      });
                    }, 3000);}}
                    tintColor="black"
                    title="Loading..."
                    titleColor="black"
                    colors={['#ff0000', '#00ff00', '#0000ff']}
                    progressBackgroundColor="#ffff00"
                  />
              }/>
            : Util.loading
        }
        
    );
  }
 

  componentDidMount(){
    this._getData();
  }

  _changeText(val){
    this.setState({
      keywords: val
    });
  }

  _renderRow(row){
    var casts = row.casts;
    var names = [];
    for(var i in casts){
      names.push(casts[i].name);
    }

    return (
      
        
          
        
        
          
            名称：{row.title}
          
          
            演员：{names}
          
          
            时间：{row.year}   评分：{row.rating.average}
          
          
            标签：{row.genres}
          
        
      
    );
  }

  _getData(){
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    var that = this;
    var baseURL = ServiceURL.movie_search + '?count=10&q=' + this.state.keywords;
    this.setState({
      show: false
    });
    Util.get(baseURL, function(data){
      if(!data.subjects || !data.subjects.length){
        return alert('获取数据出错');
      }
      var subjects = data.subjects;
      that.setState({
        dataSource: ds.cloneWithRows(subjects),
        show: true
      });
    }, function(err){
      alert(err);
    });
  }

}

var styles = StyleSheet.create({
  flex_1:{
    flex:1,
    marginTop:60,
  },
  row:{
    flexDirection:'row'
  },
  img:{
    width:80,
    height:110,
    resizeMode: Image.resizeMode.contain
  },
  textWitdh:{
    flex:1,
    marginLeft:15,
  },
  mainTitle:{
     flex:1,
     marginLeft:15,
     fontSize:17,
  },
  item:{
    backgroundColor:'#F1F2F3',
    marginTop:0,
    height:140,
    paddingTop:15,
    paddingBottom:5,
    paddingLeft:10,
    borderBottomWidth:Util.pixel,
    borderTopWidth:Util.pixel,
    borderColor:"#ddd"
  },
  
});