本文共 1408 字，大约阅读时间需要 4 分钟。

FlatList的使用

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

如果需要分组/类/区（section），请使用。

建议以后尽量少使用ListView，毕竟性能不如FlatList

使用方便简单，如下：

import React, { Component } from 'react'import {    View,    Image,    Dimensions,    ScrollView,    Text,    StyleSheet,    TouchableOpacity,    Button,    FlatList,    ActivityIndicator,    RefreshControl,}from 'react-native'var flatListData = [{        key: 'a',        text: '444'    },{        key: 'b',        text: '333'    },{        key: 'c',        text: '2222'    },{        key: 'd',        text: '111'    }];class DetailePageextends Component {     constructor(props) {        super(props);        this.state = {        };    }    render() {        const { params } = this.props.navigation.state;        return (            
                   
    
                         }                />                  
    
           )    }  //此函数用于为给定的item生成一个不重复的key    _keyExtractor = (item, index) => item.key;    componentDidMount() {    }    //列表的头部    ListHeaderComponent() {        return (            
            )    }    //列表的每一行    renderItem({item,index}) {        return (            
                   
                 
           )    }    //绘制列表的分割线    renderItemSeparator(){    }    //点击列表点击每一行    clickItem(item,index) {        alert(index)    }}export default DetailePage

转载地址：http://izrni.baihongyu.com/