基于ListView組件

Simulator Screen Shot 2016年8月11日 下午2.00.38.png

    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      Image,
      ListView,
      TouchableOpacity, // 不透明度觸摸
      AlertIOS
    } from 'react-native';

    // 導(dǎo)入json數(shù)據(jù)
    var City = require('./City.json');
    //導(dǎo)入外部的XX
    var Dimensions = require('Dimensions');
    var screenWidth = Dimensions.get('window').width;


    // 一些常量設(shè)置
    var cols = 3;
    var cellWH = 100;
    var vMargin = (screenWidth - cellWH * cols) / (cols + 1);
    var hMargin = 25;

    // ES5
    var ViewController = React.createClass({
      // 設(shè)置默認(rèn)值,固定值()
      getDefaultProps(){
          return{

          }
      },

      // 初始化函數(shù)
      getInitialState(){

         var  getSectionData = (dataBlob, sectionID) => {
             return dataBlob[sectionID];
         };

         var  getRowData = (dataBlob, sectionID, rowID) => {
             return dataBlob[sectionID + ':' + rowID];
         };

          return{
              dataSource: new ListView.DataSource({
                  getSectionData: getSectionData, // 獲取組中數(shù)據(jù)
                  getRowData: getRowData, // 獲取行中的數(shù)據(jù)
                  rowHasChanged: (r1, r2) => r1 !== r2,
                  sectionHeaderHasChanged:(s1, s2) => s1 !== s2
              })
          }

      },

      render(){
          return(
              <ListView

              />
          );
      },

      // 復(fù)雜的操作:數(shù)據(jù)請(qǐng)求 或者 異步操作(定時(shí)器)
      componentDidMount(){
          // 調(diào)用json數(shù)據(jù)
          this.loadDataFromJson();
      },


      loadDataFromJson(){
         // 拿到j(luò)son數(shù)據(jù)
         var jsonCityData = City
         // 定義一些變量
          var jsonKey = [], //裝所有key值的數(shù)組
              dataBlob = {},
              sectionIDs = [],
              rowIDs = [];
        //取出json的key值 并排列
        for (var key in jsonCityData) {
           jsonKey.push(key);
        }
          jsonKey.sort() //數(shù)組排序abcdef...
         //遍歷
          for(var i=0; i<jsonKey.length; i++){
              // 1. 把組號(hào)放入sectionIDs數(shù)組中
              sectionIDs.push(i);

              // 2.把組中內(nèi)容放入dataBlob對(duì)象中
              allKey = jsonKey[i]
              dataBlob[i] = allKey

              // 3. 取出該組中所有的城市
              citys = jsonCityData[allKey];
              rowIDs[i] = [];

              // 4. 遍歷所有的城市數(shù)組
              for(var j=0; j<citys.length; j++){
                  // 把行號(hào)放入rowIDs
                  rowIDs[i].push(j);
                  // 把每一行中的內(nèi)容放入dataBlob對(duì)象中
                  dataBlob[i+':'+j] = citys[j];
              }
          }

          // 更新?tīng)顟B(tài)
          this.setState({
              dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)
          });

      },

       render(){
          return(
              <View style={styles.outerViewStyle}>
                  {/*頭部*/}
                  <View style={styles.headerViewStyle}>
                      <Text style={{color:'white', fontSize:18, marginTop:18,}}>城市選擇</Text>
                  </View>
                  {/*ListView*/}
                  <ListView
                      style={styles.listViewStyle}
                      dataSource={this.state.dataSource}
                      renderRow={this.renderRow}
                      renderSectionHeader={this.renderSectionHeader}
                  />
              </View>
          );
       },

       // 每一行的數(shù)據(jù)
       renderRow(rowData){

           return(

               <TouchableOpacity activeOpacity={0.5} onPress={()=>{AlertIOS.alert("??")}}>
                   <View style={styles.rowStyle}>

                      <Text style={{marginLeft:5}}>{rowData.name}</Text>
                   </View>
               </TouchableOpacity>
           );
       },

       // 每一組中的數(shù)據(jù)
       renderSectionHeader(sectionData, sectionID){
           return(
               <View style={styles.sectionHeaderViewStyle}>
                  <Text style={{marginLeft:5, color:'#12A8F6'}}>{sectionData}</Text>
               </View>
           );
       }
    });

    const styles = StyleSheet.create({
      outerViewStyle:{
        //占滿窗口
         flex:1,
      },


      headerViewStyle:{
          height:64,
          backgroundColor:'#12A8F6',

          justifyContent:'center',
          alignItems:'center'
      },

      listViewStyle: {
        // 改變主軸的方向
      //flexDirection:'row',
        // 多行顯示
        //flexWrap:'wrap'
      },

      //cell row的風(fēng)格
      rowStyle:{
        // 設(shè)置主軸的方向
        height: 44,
        flexDirection:'row',
        // 側(cè)軸方向居中
        alignItems:'center',
        padding:10,

        borderBottomColor:'#e8e8e8',
        borderBottomWidth:0.5
      },


      sectionHeaderViewStyle:{
          backgroundColor:'#ECECEC',
          height:25,
          padding:5,
          justifyContent:'center'
      }
    });

    AppRegistry.registerComponent('ViewController', () => ViewController);