RN 列表组件之三 FlatList

RN 列表组件之三 FlatList

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

@FlatList 组件的属性

<FlatList  
    ref = 'flatList'  // this.refs.flatList 获取到该组件
    data = {[{name: '小米'},{name: '小兵'}]}   // 列表的数据源, 数组
    extraData = {this.state} //引用类型，数据可能不会更新，只是复制，没有操作引用的对象
    ListHeaderComponent = {this._listHeaderComponent.bind(this)}//渲染头部组件
    ListEmptyComponent = {this._listEmptyComponent.bind(this)} //列表为空时渲染
    initialNumToRender = {6} //首屏渲染的数据量，不会在滑动中被卸载
    renderItem = {this._renderItem.bind(this)} //渲染列表数据
    keyExtractor= {(item, index) => index + item;} //每行不一样的key
    ItemSeparaterComponent = {() => <View style={{height:6}} /> //行分隔线，首行前和尾行后无分隔
    columnWrapperStyle = {{borderWidth: 2}}  //行数>1时，可额外设置行样式
    showsVerticalScrollIndicator = {false} //继承ScrollView的属性，显示水平指示器默认是true
    horizontal = {false} //默认true是垂直布局
    numColumns = {3}  // 水平布局的item数量
    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>
    )
}

tips：复习下js的引用类型和基本类型
基本类型：undefined、string、number、null、boolean
特点：值不可改变，比较是值的比较，存在栈中，栈区包括了变量的标识符和变量的值。
引用类型：object、function、array等对象类型，对象是属性和方法的集合。也就是说引用类型可以拥有属性和方法，属性又可以包含基本类型和引用类型。
特点：值可变，同时保存在栈内存和堆内存中的对象，引用类型的比较是引用的比较，引用类型的赋值其实是对象保存在栈区地址指针的赋值，因此两个变量指向同一个对象，任何的操作都会相互影响