RN 列表组件之三 FlatList

RN 列表组件之三 FlatList

如果需要分组/类/区，就使用SectionLIst；基于VirtualizedList 组件的封装

@FlatList 组件的属性

<FlatList  
    ref = 'flatList'  // this.refs.flatList 获取到该组件
    data = {[{name: '小米'},{name: '小兵'}]}   // 列表的数据源，可以this.state.data
    ListHeaderComponent = {this._listHeaderComponent.bind(this)}//渲染头部组件
    ListEmptyComponent = {this._listEmptyComponent.bind(this)} //列表为空时渲染
    initialNumToRender = {6} //首屏渲染的数据量，不会在滑动中被卸载
    renderItem = {this._renderItem.bind(this)} //渲染列表数据
    keyExtractor= {(itemT, index) => index;} //每行不一样的key
    ItemSeparaterComponent = {() => <View style={{height:6}} /> //行分隔线，首行前和尾行后无分隔
    columnWrapperStyle = {{borderWidth: 2}}  //行数>1时，可额外设置行样式
    horizontal = {false} //默认是垂直布局
    ListFooterComponent = {this._listFooterComponent.bind(this)} //渲染底部组件
    refreshing = {true} // 等待加载出现加载的符号
    onRefresh = {this._onRefresh.bind(this)} //上拉刷新
    onEndReachedThreshold = {0.1} //当距离内容比例不足内容0.1比例时触发onEndReached
    onEndReached = {this._endReached.bind(this)} //上拉加载数据       
/>
_onRefresh(){
    let that=this;
    // 页面渲染之后在加载结束周期重新加载
    that.componentDidMount();
}
_endReached(){
    let that=this
    // 判断首屏满屏的情况
    if(that.state.data && that.state.length < parseInt(that.state.totalCount)){
        that.state.currentPage++;
    }else{
         //若总数未满一屏，进去就提示
         alert('已加载完成')
    }
}
_listHeaderComponent(){
    return (
        <View>
            <Text>也可以是一组图片的渲染</Text>
        </View>
    )
}
_listEmptyComponent(){
    return (
        <View>
            <Text>暂无数据</Text>
        </View>
    )
}
_renderItem(item){
    return (
        <TouchableHighlight
            style = {{color: '#333'}}
            activeOpacity = {0.5}  //触摸激活时的不透明度
            onHindUnderlay = {() => {}}  //底层颜色被隐藏时调用
            onShowUnderlay = {() => {}}  //底层颜色显示的时候调用
            underlayColor = {'red'}     //触摸操作底层的颜色
            onPress = {() => {}}    //可以绑定事件
        >  // 触摸视图，只能包含一个子节点
            <View><Text>{item.name}</Text></View>
        </TouchableHighlight>
    )
}
_listFooterComponent(){
    return (
        <View>
            <Text>列表底部的布局</Text>
        </View>
    )
}