FlatList的使用(一)

目前新版的react native已经都用FlatList代替了ListView。所以有必要学习下FlatList都具体用法。官方中文网描述如下：

高性能的简单列表组件，支持下面这些常用的功能：

• 完全跨平台。
• 支持水平布局模式。
• 行组件显示或隐藏时可配置回调事件。
• 支持单独的头部组件。
• 支持单独的尾部组件。
• 支持自定义行间分隔线。
• 支持下拉刷新。
• 支持上拉加载。
• 支持跳转到指定行（ScrollToIndex）。
• 支持多列布局

实现代码如下：

import React, { Component } from 'react';
import {
    AppRegistry,
    FlatList,
    View,
    Button,
    Image,
    StyleSheet,
    Text,
    TouchableOpacity,
    Dimensions,
    Alert

} from 'react-native';

 class  myapp extends React.PureComponent {

    _flatList;

    constructor(props) {
        super(props);
        this.state = {
            refer: false,
        }
    }

  
    footView = () => {
        return (
            <View style={ {flex: 1, flexDirection:'row',justifyContent: 'center',backgroundColor: '#a1f11a',alignItems: 'center',height:44}}>
                <Text>加载完毕</Text> 
            </View>
        )
    };

    renderItemView = (item) => {
        return (
           
            <View style={styles.item_view}>
                <View>
                   <Image
                    style={styles.item_view_img}
                    source={ {uri: 'https://img-blog.csdnimg.cn/20190323161354536.png'}}/>
                </View>
               
                  <View style={styles.item_text_view}>
                      <Text style={styles.item_view_text}>{item.title}</Text>
                      <Text style={styles.item_view_text} numberOfLines={10} >{item.content}</Text>
                  </View>
              
              </View>
        )
    };

    separatorView = () => {
        return (
            <View style={ {flex: 1, backgroundColor: '#ff0000', height: 1}}>

            </View>
        )
    };

    onRefresh = () => {
        this.setState({
            refer: true,
        });
        this.timer = setTimeout(
            ()=>{
                console.log('刷新结束');
                this.setState({
                    refer: false,
                });
            },
            2000
        );
    };

    componentWillUnmount() {
        clearTimeout(this.timer)
    }

    render() {
        var data = [];
        for (var i=0; i<15; i++) {
            data[i] = {key:i,title:'新闻标题'+i,content:'11111111111111111111新闻内容新闻内新闻闻内新闻1111速度速度速度达到速度速度速度颠三倒四内'+i}
        }
        return(

            <View style={ {backgroundColor: '#ffaaff', flex: 1, justifyContent: 'center'}}>
                <FlatList ref={(flatList)=>this._flatList = flatList} style={ {backgroundColor: '#fff', flex: 1, marginTop: 44}}
                          data={data}
                          renderItem={({item}) => this.renderItemView(item)}
                                
                                  ListFooterComponent = {this.footView}
                                  ItemSeparatorComponent = {this.separatorView}

                         
                          onViewableItemsChanged={(info)=>{
                              console.log(info);
                          }}
                          refreshing = {this.state.refer}
                          onRefresh={this.onRefresh}
                          onEndReachedThreshold={0.0000001}
                          onEndReached={(info) => {
                               Alert.alert('加载完毕');
                          } }
                />

            </View>

        )
    }
}

const styles = StyleSheet.create({
  

  item_view: {
    width: Dimensions.get('window').width,
    flex: 1, 
    flexDirection:'row',
    alignItems: 'center',
    height: 80,
    
  },
  item_view_img:{
    marginLeft: 10,
    width: 60,
    height: 60
  },
  item_text_view:{
    marginLeft: 20
  },
  item_view_text:{
    paddingRight: 70  
  }
  
});

export default myapp;