React Native FlatList组件的用法

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

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableOpacity,
} from 'react-native';
// 初始化数据
var Arr = [{name:'河北省',},
           {name:'山西省',},
           {name:'辽宁省',},
           {name:'吉林省',},
           {name:'黑龙江省',},
           {name:'江苏省',},
           {name:'浙江省',},
           {name:'福州省',}];
export default class MyFlatList extends Component {
  //点击每一行的对象
  Cellheader(data){
    alert(data.name);
  }
  //列表的每一行
  renderItemView({item,index}){
    return(
      <TouchableOpacity style={{flex:1,
                                height:60,
                                backgroundColor:'orange',
                        }}
                        onPress={()=>{this.Cellheader(item)}}
                       >
        <View style={{backgroundColor:'green',
                      height:59,justifyContent: 'center',
                      alignItems: 'center'}}>
           <Text>{item.name}</Text>
        </View>
      </TouchableOpacity>
    );
  }
  //定义页头
  ListHeaderComponent(){
    return(
       <View style={{height:40,backgroundColor:'red',justifyContent: 'center',}}>
         <Text>我是页头</Text>
       </View>
    );
  }
  //定义页脚
  ListFooterComponent(){
    return(
       <View style={{height:40,backgroundColor:'yellow',justifyContent: 'center',}}>
          <Text>我是页脚</Text>
       </View>
    );
  }
  render() {
    //给数据追加一个key的字段，不然会有警告的,参数数组中的每一项，需要包含 key 值作为唯一标示
    for (var i = 0; i < Arr.length; i++) {
       Arr[i]['key'] = i;
    }
    return (
      <View style={styles.container}>
        <FlatList style={{backgroundColor:'orange',flex:1,marginTop:64}}
                  data = {Arr}
                  ListHeaderComponent={this.ListHeaderComponent.bind(this)}
                  ListFooterComponent={this.ListFooterComponent.bind(this)}
                  renderItem={this.renderItemView.bind(this)}
                  >
           
        </FlatList>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

效果如下

QQ20170815-142950-HD.gif