介紹

ListView組件是React Native中一個比較核心的組件，用途非常的廣。該組件設(shè)計用來高效的展示垂直滾動的數(shù)據(jù)列表。最簡單的API就是創(chuàng)建一個ListView.DataSource對象，同時給該對象傳入一個簡單的數(shù)據(jù)集合。并且使用數(shù)據(jù)源(data source)實例化一個ListView組件,定義一個renderRow回調(diào)方法(該方法的參數(shù)是一個數(shù)組)，該renderRow方法會返回一個可渲染的組件(該就是列表的每一行的item)

ListView簡單實例

注:iOS9訪問不了Http需要設(shè)置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';

//定義網(wǎng)絡(luò)請求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 {

  // 構(gòu)造
  constructor(props) {
    super(props);
    // 初始狀態(tài)
    this.state = {
      dataSource : new ListView.DataSource({
        rowHasChanged:(row1,row2) => row1 !== row2,
      }),
      loaded :false,
    };
    // 在ES6中，如果在自定義的函數(shù)里使用了this關(guān)鍵字，則需要對其進(jìn)行“綁定”操作，否則this的指向會變?yōu)榭?    // 像下面這行代碼一樣，在constructor中使用bind是其中一種做法（還有一些其他做法，如使用箭頭函數(shù)等）
    this.fetchData = this.fetchData.bind(this);
  }

  componentDidMount() {
    this.fetchData();
  }

  //獲取數(shù)據(jù)的方法
  fetchData(){
    fetch(REQUEST_URL)
        .then((response) => response.json())
        .then((responseData) =>{
          // 注意，這里使用了this關(guān)鍵字，為了保證this在調(diào)用時仍然指向當(dāng)前組件，我們需要對其進(jìn)行“綁定”操作
          this.setState({
            dataSource:this.state.dataSource.cloneWithRows(responseData.data),
            loaded:true
          });
        })
        .done();
  }
  render()
  {
    if(!this.state.loaded){//如果沒有數(shù)據(jù),就執(zhí)行正在加載數(shù)據(jù)的布局
      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“皇家戰(zhàn)錘”中隊也進(jìn)行了指揮官更換{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