zoukankan      html  css  js  c++  java
  • React Native 之SectionList

    接上一篇:

    /pages/SectionListDemo.js

    import React, {Fragment,Component} from 'react';
    import {
      SafeAreaView,
      StyleSheet,
      ScrollView,
      View,
      Text,
      StatusBar,
      FlatList,
      RefreshControl,
      ActivityIndicator,
      ListFooterComponent,
      SectionList,
    } from 'react-native';
    
    const CITY_NAME = [{data:['北京','上海','广州'],title:'一线城市'},
    {data:['武汉','杭州','三亚','宁波','杭州','合肥','芜湖','福州','厦门','温州'],title:'二三线城市'}];
    export default class SectionListDemo extends Component {
    
      constructor(props){
        super(props);
        this.state={
          isLoading:false,
          dataArray: CITY_NAME
        }
      }
    
      loadData(refreshing){
        if (refreshing) {
          this.setState({
            isLoading:true
          });
        }
    
        setTimeout(()=>{
          let dataArray = [];
          if (refreshing) {
            for(let i = this.state.dataArray.length-1;i>=0;i--){
              dataArray.push(this.state.dataArray[i]);
            }
          }
          else {
            dataArray=this.state.dataArray.concat(CITY_NAME);
          }
    
          this.setState({
            dataArray:dataArray,
            isLoading:false
          })
        },2000);
      }
    
      genIndicator(){
        return <View style={styles.indicatorContainer}>
          <ActivityIndicator
            style={styles.indicator}
            size={'large'}
            animating={true}
          />
          <Text>正在加载更多</Text>
        </View>
      }
    
      _renderItem(data){
        return <View style={styles.item}>
              <Text style={styles.text}>{data.item}</Text>
        </View>
      }
    
      _renderSectionHeader({section}){
        return <View style={styles.sectionHeader}>
            <Text style={styles.text}>{section.title}</Text>
        </View>
      }
    
      render(){
        return (
          <View>
            <SectionList
              sections={CITY_NAME}
              renderItem={(data)=>this._renderItem(data)}
              // refreshing={this.state.isLoading}
              // onRefresh={()=>{
              //   this.loadData();
              // }}
              //要定制刷新外观不能用上面这个,要用下面这个
              refreshControl = {
                <RefreshControl
                  title={'加载中...'}
                  colors={['red']}//此颜色无效
                  tintColor={'orange'}
                  titleColor={'red'}//只有ios有效
    
                  refreshing={this.state.isLoading}
                  onRefresh={()=>{
                    this.loadData(true);
                  }}
                />
              }
              ListFooterComponent={()=>this.genIndicator()}//上拉加载更多视图
              onEndReached={()=>{
                this.loadData()
              }}
              renderSectionHeader={(data)=>this._renderSectionHeader(data)}
    
    
            />
          </View>
          );
      }
    }
    
    const styles = StyleSheet.create({
      container:{
        flex:1,
        alignItems:'center',
        backgroundColor: '#F5FCFF'
      },
      item:{
        backgroundColor: '#168',
        height:200,
        marginRight:15,
        marginLeft:15,
        marginBottom:15,
        alignItems:'center',
        //justifyContetnt:'center',
    
    
      },
      text:{
        color:'white',
        fontSize:20,
      },
      indicatorContainer:{
        alignItems:'center'
      },
      indicator:{
        color:'red',
        margin:10
      },
      sectionHeader:{
        height:50,
        backgroundColor:'#198',
        alignItems:'center'
      }
    
    })
    View Code

    效果图:

    此文仅为鄙人学习笔记之用,朋友你来了,如有不明白或者建议又或者想给我指点一二,请私信我。liuw_flexi@163.com/QQ群:582039935. 我的gitHub: (学习代码都在gitHub) https://github.com/nwgdegitHub/
  • 相关阅读:
    服务器资源共享--IIS站点/虚拟目录中访问共享目录(UNC)
    sql reiserror 输出错误
    使用xib方式创建UITableViewCell,设置Label自动换行注意事项
    原生的UITableViewCell高度自适应,textLabel自动换行显示
    屏幕截取-2种模式
    NSDictionary初始化,使用@{}方法,插入nil时会报空指针异常
    Unicode解码、URL编码/解码
    解决UITableView数据没有充满屏幕时,显示多余的空白cell的问题
    UITableView的分割线不满屏的解决方法
    动态获取UIWebView的真正高度
  • 原文地址:https://www.cnblogs.com/liuw-flexi/p/11455054.html
Copyright © 2011-2022 走看看