介绍

ListView组件是React Native中一个比较核心的组件，用途非常的广。该组件设计用来高效的展示垂直滚动的数据列表。最简单的API就是创建一个ListView.DataSource对象，同时给该对象传入一个简单的数据集合。并且使用数据源(data source)实例化一个ListView组件,定义一个renderRow回调方法(该方法的参数是一个数组)，该renderRow方法会返回一个可渲染的组件(该就是列表的每一行的item)

ListView简单实例

注:iOS9访问不了Http需要设置ATS
修改plist文件添加如下:

App Transport Security Settings
Allow Arbitrary Loads

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

//定义网络请求URL
var REQUEST_URL = '此处写Url,自己找个吧,我的不便透露'


class Row extends  Component{
  onClick(){
    this.props.onClick(this.props.data);
  }
  render(){
    return (
        <View style={styles.row}>
          <Text style={styles.text}>{this.props.data.text}  </Text>
        </View>
    );
  }
}

class listviewiOS extends Component {

  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {
      dataSource : new ListView.DataSource({
        rowHasChanged:(row1,row2) => row1 !== row2,
      }),
      loaded :false,
    };
    // 在ES6中，如果在自定义的函数里使用了this关键字，则需要对其进行“绑定”操作，否则this的指向会变为空
    // 像下面这行代码一样，在constructor中使用bind是其中一种做法（还有一些其他做法，如使用箭头函数等）
    this.fetchData = this.fetchData.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

  //获取数据的方法
  fetchData(){
    fetch(REQUEST_URL)
        .then((response) => response.json())
        .then((responseData) =>{
          // 注意，这里使用了this关键字，为了保证this在调用时仍然指向当前组件，我们需要对其进行“绑定”操作
          this.setState({
            dataSource:this.state.dataSource.cloneWithRows(responseData.data),
            loaded:true
          });
        })
        .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.loadStyle}>
          <Text>
            load datas...
          </Text>
        </View>
    );
  }

  renderMovie(company){
    return(
        <View style={styles.container}>
          <View style={styles.titleViewStyle}>
            <View style={styles.titleBackGroundView}>
              <Text style={styles.title}>{company.entname}</Text>
            </View>
            <View style={styles.imageViewStyle}>
              <Image style={styles.images} source={require('./ImagesiosTaoge/image.png')} resizeMode='contain' />
              <Image style={styles.images} source={require('./ImagesiosTaoge/image.png')} resizeMode='contain' />
              <Image style={styles.images} source={require('./ImagesiosTaoge/image.png')} resizeMode='contain' />
              <Image style={styles.images} source={require('./ImagesiosTaoge/image.png')} resizeMode='contain' />
              <Image style={styles.images} source={require('./ImagesiosTaoge/image.png')} resizeMode='contain' />
            </View>
          </View>

          <View style={styles.detailViewStyle}>
            <Text style={styles.comment}>美军里根号航母搭载的VFA 27“皇家战锤”中队也进行了指挥官更换{company.zhuyinghangye}</Text>
          </View>
        </View>
    );
  }

}

const styles = StyleSheet.create({
  loadStyle:{
    paddingTop: 90,
    flexDirection:'column',
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  container: {
    flexDirection:'column',
    backgroundColor: '#FFFFFF',
    marginLeft:10
  },
  titleViewStyle:{
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  titleBackGroundView:{
    marginLeft:10,
    backgroundColor:'#2D5BE3',
    alignItems:'center',
    borderRadius:5,
    flexWrap: 'wrap',
    height:18

  },
  detailViewStyle:{
    marginLeft:10,
    marginRight:10,
    marginTop:5,
    marginBottom:10
  },
  comment: {
    textAlign: 'left'
  },
  title: {
    fontSize: 16,
    textAlign: 'left',
    color:'#FFFFFF',
    flexWrap : 'wrap',
    marginRight:6,
    marginLeft:3
    // maxWidth:200
  },
  listView: {
    paddingTop: 20,
    backgroundColor: '#FFFFFF'
  },
  imageViewStyle:{
    marginLeft:10,
    alignItems:'center',
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  images:{
    width: 15,
    height: 15
  },
  row: {
    borderColor: 'red',
    borderWidth: 5,
    padding: 20,
    backgroundColor: '#3a5795',
    margin: 5,
  },
  text: {
    alignSelf: 'center',
    color: '#fff',
  }
});

AppRegistry.registerComponent('listviewiOS', () => listviewiOS);

效果:

React-Native ListView.gif