/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  SectionList,
  TouchableOpacity,
  Dimensions
} from 'react-native';

var {height, width} = Dimensions.get('window')
const pageNavBarWidth = width/3

export default class App extends Component<{}> {
  constructor(props){
    super(props)
    this.state={
      dataArray:[],
      selectedPage:1,
    }
  }

  render() {
    return (
      <SectionList
        style={{flex:1,marginTop:44}}
        ListHeaderComponent={()=>{
          return(
            <View style={{flex:1,height:200,backgroundColor:'purple'}}>

            </View>
          )
        }}
        renderSectionHeader={({section}) =>{
          console.log(section)
          return(
            <View style={{width:width,flexDirection:'row',height:50,backgroundColor:'rgb(234,234,234)'}}>
              <TouchableOpacity style={styles.pageNavBar} onPress={()=>{this.changePageData(1)}}>
                <Text style={[styles.pageNavBarText,this.state.selectedPage === 1? {color:'red'}:{color:'black'}]}>beautiful</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.pageNavBar} onPress={()=>{this.changePageData(2)}}>
                <Text style={[styles.pageNavBarText,this.state.selectedPage === 2? {color:'red'}:{color:'black'}]}>crazy</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.pageNavBar} onPress={()=>{this.changePageData(3)}}>
                <Text style={[styles.pageNavBarText,this.state.selectedPage === 3? {color:'red'}:{color:'black'}]}>tolerance</Text>
              </TouchableOpacity>
            </View>
          )
        }}
        renderItem={({item}) => {
          return(<Text>{item}</Text>)}}
        keyExtractor={(item,index)=>index+''}
        sections={this.state.dataArray}
        stickySectionHeadersEnabled={true}
      />
    );
  }

  componentDidMount(){
    let data1 = []
    let data2 = []
    let data3 = []
    for(let i=0; i<100; i++){
      data1.push('beautiful  '+i)
      data2.push('crazy  '+i)
      data3.push('tolerance  '+i)
    }
    let sectionOneData = {data: data1, title: 'beautiful'}
    let dataArray = [sectionOneData]
    this.setState({dataArray:dataArray})
  }

  changePageData = (page)=>{
    if(page === 1){
      let data1 = []

      for(let i=0; i<100; i++){
        data1.push('beautiful  '+i)

      }
      let sectionOneData = {data: data1, title: 'beautiful'}
      let dataArray = [sectionOneData]
      this.setState({dataArray:dataArray,selectedPage:1})
    }
    if(page === 2){
      let data2 = []
      for(let i=0; i<100; i++){
        data2.push('crazy  '+i)
      }
      let sectionOneData = {data: data2, title: 'beautiful'}
      let dataArray = [sectionOneData]
      this.setState({dataArray:dataArray,selectedPage:2})
    }
    if(page === 3){

      let data3 = []
      for(let i=0; i<100; i++){

        data3.push('tolerance  '+i)
      }
      let sectionOneData = {data: data3, title: 'beautiful'}
      let dataArray = [sectionOneData]
      this.setState({dataArray:dataArray,selectedPage:3})
    }
  }

}

const styles = StyleSheet.create({
  pageNavBar:{
    width:pageNavBarWidth,
    height:50,
    alignItems:'center',
    justifyContent:'center',
  },
  pageNavBarText:{
    fontSize:20
  }
});

let u = 'xixi'

123456