Rect-Native 主要城市选择组件

基于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(
              
          );
      },

      // 复杂的操作:数据请求 或者 异步操作(定时器)
      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
                  {/*头部*/}
                  
                      城市选择
                  
                  {/*ListView*/}
                  
              
          );
       },

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

           return(

               {AlertIOS.alert("")}}>
                   

                      {rowData.name}
                   
               
           );
       },

       // 每一组中的数据
       renderSectionHeader(sectionData, sectionID){
           return(
               
                  {sectionData}
               
           );
       }
    });

    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);