ReactNative之FlatList的具体使用方法

 {item.key}}
/>

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  FlatList,
  Text,
  Button,
} from 'react-native';

var ITEM_HEIGHT = 100;

export default class FlatListDemo extends Component {

  _flatList;

  _renderItem = (item) => {
    var txt = '第' + item.index + '个' + ' title=' + item.item.title;
    var bgColor = item.index % 2 == 0 &＃63; 'red' : 'blue';
    return {txt}
  }

  _header = () => {
    return 这是头部;
  }

  _footer = () => {
    return 这是尾部;
  }

  _separator = () => {
    return ;
  }

  render() {
    var data = [];
    for (var i = 0; i <100; i++) {
      data.push({key: i, title: i + ''});
    }

    return (
      
        {
          //this._flatList.scrollToEnd();
          //this._flatList.scrollToIndex({viewPosition:0,index:8});
          this._flatList.scrollToOffset({animated: true, offset: 2000});
        }}/>
        
          this._flatList = flatList}
            ListHeaderCompOnent={this._header}
            ListFooterCompOnent={this._footer}
            ItemSeparatorCompOnent={this._separator}
            renderItem={this._renderItem}

            //numColumns ={3}
            //columnWrapperblack',paddingLeft:20}}

            //horizOntal={true}

            //getItemLayout={(data,index)=>(
            //{length: ITEM_HEIGHT, offset: (ITEM_HEIGHT+2) * index, index}
            //)}

            //OnEndReachedThreshold={5}
            //OnEndReached={(info)=>{
            //console.warn(info.distanceFromEnd);
            //}}

            //OnViewableItemsChanged={(info)=>{
            //console.warn(info);
            //}}
            data={data}>
          
        

      
    );
  }
}

const styles = StyleSheet.create({
  txt: {
    textAlign: 'center',
    textAlignVertical: 'center',
    color: 'white',
    fontSize: 30,
  }
});

const {width,height}=Dimensions.get('window')
export default class Main extends Component{
  // 构造
  constructor(props) {
    super(props);
  }
  refreshing(){
    let timer = setTimeout(()=>{
          clearTimeout(timer)
          alert('刷新成功')
        },1500)
  }
  _onload(){
    let timer = setTimeout(()=>{
      clearTimeout(timer)
      alert('加载成功')
    },1500)
  }
  render() {
    var data = [];
    for (var i = 0; i <100; i++) {
      data.push({key: i, title: i + ''});
    }

    return (
      
        {
          this._flatList.scrollToOffset({animated: true, offset: 2000});
        }}/>
        
          this._flatList = flatList}
            ListHeaderCompOnent={this._header}
            ListFooterCompOnent={this._footer}
            ItemSeparatorCompOnent={this._separator}
            renderItem={this._renderItem}
            OnRefresh={this.refreshing}
            refreshing={false}
            OnEndReachedThreshold={0}
            OnEndReached={
              this._onload
            }
            numColumns ={3}
            columnWrapperblack',paddingLeft:20}}

            //horizOntal={true}

            getItemLayout={(data,index)=>(
            {length: 100, offset: (100+2) * index, index}
            )}

            data={data}>
          
        

      
    );
  }


  _renderItem = (item) => {
    var txt = '第' + item.index + '个' + ' title=' + item.item.title;
    var bgColor = item.index % 2 == 0 &＃63; 'red' : 'blue';
    return {txt}
  }

  _header = () => {
    return 这是头部;
  }

  _footer = () => {
    return 这是尾部;
  }

  _separator = () => {
    return ;
  }


}
const styles=StyleSheet.create({
  container:{

  },
  content:{
    width:width,
    height:height,
    backgroundColor:'yellow',
    justifyContent:'center',
    alignItems:'center'
  },
  cell:{
    height:100,
    backgroundColor:'purple',
    alignItems:'center',
    justifyContent:'center',
    borderBottomColor:'#ececec',
    borderBottomWidth:1

  },
  txt: {
    textAlign: 'center',
    textAlignVertical: 'center',
    color: 'white',
    fontSize: 30,
  }

})