React Native FlatList属性及使用详情

FlatList属性

• data：列表数据
• numColumns：列数 组件内元素必须是等高的,无法支持瀑布流布局
• renderItem：渲染每个组件
• onEndReached：上拉加载事件
• onEndReachedThreshold={0.1}// 滑动到最后视图内容比例，设置为0-1，例如0.5则表示滑到最后一个视图一半开始回调
• onMoveShouldSetResponderCapture:点击item事件
• ItemSeparatorComponent：分割线组件，
• ListFooterComponent：结尾组件
• ListHeaderComponent：头组件
• horizontal：设置为true则变为水平列表。
• columnWrapperStyle：numColumns大于1时，设置每行的样式
• getItemLayout：如果我们知道行高可以用此方法节省动态计算行高的开销。
• refreshing：是否正在加载数据
• onRefresh：设置此属性需要一个标准的 RefreshControl 控件，刷新数据
• onViewableItemsChanged：当一个新的Item渲染或者隐藏 的时候调用此方法。参数：info: {viewableItems: Array, changed: Array}
• viewableItems：当前可见的Item，changed：渲染或者隐藏的Item。
• scrollToEnd({params?: ?{animated?: ?boolean}})：滚动到末尾，如果不设置getItemLayout属性的话，可能会比较卡。
• scrollToIndexparams: {animated?: ?boolean, index: number ， viewPosition?: number}：滚动到制定的位置
• scrollToOffset(params: {animated?: ?boolean, offset: number})：滚动到指定的偏移的位置。

FlatList用法

• 举个例子，效果图如下
  
• 代码如下：

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

//创建一组数据
const lists=[
    {id:1,data:33},
    {id:2,data:66},
    {id:3,data:77},
    {id:4,data:88},
]
export default class App2 extends Component {
    constructor(props){
        super(props)
        this.state={lists:lists}
    }
    //item,默认是取lists里面的值的
    renderDate({item}){
        return(
            <View style={styles.container}>
                <View style={styles.view1}><Text>{item.id}</Text></View>
                <View style={styles.view2}><Text>{item.data}</Text></View>
            </View>
        )
    }
    onClick(){
        alert("点击")
    }
  render() {
    return (
      <View>
          <FlatList 
            numColumns={1} //一行只展示一组数据
            data={this.state.lists} //数据
            renderItem={this.renderDate}//renderItem渲染组件（自定义布局）
            // onMoveShouldSetResponderCapture={this.onClick}//点击触摸事件
            // onEndReached={this.onClick}//上拉加载
            // onEndReachedThreshold={0.1}// 滑动到最后视图内容比例，设置为0-1，例如0.5则表示滑到最后一个视图一半开始回调
            />
      </View>
    )
  }
}
const styles=StyleSheet.create({
   container:{
       height:30,
       flexDirection:"row"
   },
   view1:{
       flex:1,
       backgroundColor:"pink",
       alignItems:"center",
       borderWidth:1
       
   },
   view2:{
       flex:3,
       backgroundColor:"#ccc",
       alignItems:"center",
       borderWidth:1
   }
})