基于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';

    // 导入json数据
    var City = require('./City.json');
    //导入外部的XX
    var Dimensions = require('Dimensions');
    var screenWidth = Dimensions.get('window').width;


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

    // ES5
    var ViewController = React.createClass({
      // 设置默认值,固定值()
      getDefaultProps(){
          return{

          }
      },

      // 初始化函数
      getInitialState(){

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

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

          return{
              dataSource: new ListView.DataSource({
                  getSectionData: getSectionData, // 获取组中数据
                  getRowData: getRowData, // 获取行中的数据
                  rowHasChanged: (r1, r2) => r1 !== r2,
                  sectionHeaderHasChanged:(s1, s2) => s1 !== s2
              })
          }

      },

      render(){
          return(
              <ListView

              />
          );
      },

      // 复杂的操作:数据请求 或者 异步操作(定时器)
      componentDidMount(){
          // 调用json数据
          this.loadDataFromJson();
      },


      loadDataFromJson(){
         // 拿到json数据
         var jsonCityData = City
         // 定义一些变量
          var jsonKey = [], //装所有key值的数组
              dataBlob = {},
              sectionIDs = [],
              rowIDs = [];
        //取出json的key值 并排列
        for (var key in jsonCityData) {
           jsonKey.push(key);
        }
          jsonKey.sort() //数组排序abcdef...
         //遍历
          for(var i=0; i<jsonKey.length; i++){
              // 1. 把组号放入sectionIDs数组中
              sectionIDs.push(i);

              // 2.把组中内容放入dataBlob对象中
              allKey = jsonKey[i]
              dataBlob[i] = allKey

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

              // 4. 遍历所有的城市数组
              for(var j=0; j<citys.length; j++){
                  // 把行号放入rowIDs
                  rowIDs[i].push(j);
                  // 把每一行中的内容放入dataBlob对象中
                  dataBlob[i+':'+j] = citys[j];
              }
          }

          // 更新状态
          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>
          );
       },

       // 每一行的数据
       renderRow(rowData){

           return(

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

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

       // 每一组中的数据
       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的风格
      rowStyle:{
        // 设置主轴的方向
        height: 44,
        flexDirection:'row',
        // 侧轴方向居中
        alignItems:'center',
        padding:10,

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


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

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