React Native 之SectionList

Connect one:

/pages/SectionListDemo.js

Import React, {Fragment, the Component} from 'REACT' ; 
Import { 
  SafeAreaView, 
  the StyleSheet, 
  the ScrollView, 
  View, 
  the Text, 
  the StatusBar, 
  FlatList, 
  RefreshControl, 
  ActivityIndicator, 
  ListFooterComponent, 
  SectionList, 
} from 'REACT-Native' ; 

const CITY_NAME = [{ data: [ 'Beijing', 'Shanghai', 'Guangzhou'], title: 'tier cities' }, 
{the Data: [ ' Wuhan ',' Hangzhou ',' Sanya ',' Ningbo ',' Hangzhou ',' Hefei ',' Wuhu ',' Fuzhou ',' Xiamen ',' Wenzhou '], title:' tier cities' }];
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 (); 
          // }} 
          // To customize the appearance of refresh this can not be used above, use the following 
          refreshControl = {
             < RefreshControl 
              title = { 'Loading ...' } 
              Colors = {[ 'Red']} // this invalid color 
              the tintColor = { 'Orange' } 
              titleColor = { 'Red'} // only effective ios 

              Refreshing = { the this .state.isLoading} 
              OnRefresh = {() => {
                 the this .loadData ( to 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

Renderings: