React Native常用组件之ListView组件

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

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  Image,
  TouchableOpacity
} from 'react-native';

var Car = require('./Car.json');

export default class FListViewDemo1 extends Component{

  constructor(props){
    super(props);
    var getSectionData = (dataBlob,sectinID) =>{
      return dataBlob[sectinID];
    }
    var getRowData = (dataBlob,sectinID,rowID) =>{
      return dataBlob[sectinID + ':' + rowID];
    }

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

  render(){
    return(
        <View style = {styles.outerViewStyle}>
          <View style={styles.headerViewStyle}>
            <Text>SeeMyGo品牌</Text>
          </View>

          <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
            renderSectionHeader={this.renderSectionHeader}
            style ={{backgroundColor:'white'}}
          />
        </View>

    );
  }
  renderRow(rowData){
    return(
      <TouchableOpacity actionOpacity ={0.5}>
        <View style={styles.rowStyle}>
          <Image source={{uri:rowData.icon}} style={styles.rowImageStyle}/>
          <Text>{rowData.name}</Text>
        </View>
      </TouchableOpacity>
    );
  }
  renderSectionHeader(sectinData,sectionID){
    return(
      <View style={styles.sectionHeaderViewStyle}>
        <Text>{sectinData}</Text>
      </View>
    );
  }
  componentDidMount(){
    //调用Json数据
    this.loadDataFromJson();
  }
  loadDataFromJson(){
    //拿到json数据
    var jsonData = Car.data;

    //定义一下变量
    var dataBlob = {},
        sectionIDs = [],
        rowIDs = [],
        cars = [];

    //遍历
    for(var i = 0;i<jsonData.length;i++){
      //1.把组号放入sectionID数组中
      sectionIDs.push(i);

      //2.把组中的内容放入dataBlob中
      dataBlob[i] = jsonData[i].title;

      //3.取出该组中所有的车
      cars = jsonData[i].cars;

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

    //更新状态
    this.setState({
      dataSource:this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)
    });
  }
}

const styles = StyleSheet.create({
  outerViewStyle:{
    flex:1
  },
  headerViewStyle:{
    height:64,
    backgroundColor:'orange',
    justifyContent:'center',
    alignItems:'center'
  },
  rowStyle:{
    flexDirection:'row',
    alignItems:'center',
    padding:10,
    borderBottomColor:'#e8e8e8',
    borderBottomWidth:0.3
  },
  rowImageStyle:{
    width:70,
    height:70
  },
  sectionHeaderViewStyle:{
    backgroundColor:'#e8e8e8',
    height:25,
    justifyContent:'center'
  }
});

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

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

var Dimensions = require('Dimensions');
var screenWidth = Dimensions.get('window').width;

// 导入json数据
var shareData = require('./shareData.json');

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


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

      }
  },

   // 设置一些初始值(可以变化)
   getInitialState(){
      // 创建数据源
      var ds = new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2});
      return{
          dataSource: ds.cloneWithRows(shareData.data)
      }
   },

   render(){
      return(
          <ListView
              dataSource={this.state.dataSource}
              renderRow={this.renderRow}
              contentContainerStyle={styles.listViewStyle}
          />
      );
   },

   // 单独的cell
  renderRow(rowData){
     return(
         <TouchableOpacity activeOpacity={0.5} onPress={()=>{AlertIOS.alert('哈哈')}}>
           <View style={styles.innerViewStyle}>
               <Image source={{uri: rowData.icon}} style={styles.iconStyle}/>
               <Text>{rowData.title}</Text>
           </View>
         </TouchableOpacity>
     );
  }

});


const styles = StyleSheet.create({
    listViewStyle:{
       // 改变主轴的方向
       flexDirection:'row',
       // 多行显示
       flexWrap:'wrap'
    },

    iconStyle:{
       width:80,
       height:80
    },

   innerViewStyle:{
      width:cellWH,
      height:cellWH,
      marginLeft:vMargin,
      marginTop:hMargin,

      // 居中
      alignItems:'center'
   }
});

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