汽车列表展示

react-native init Cars --version 0.44.3

image.png image.png

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

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

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

var Cars = React.createClass({
  getInitialState(){
    var getSectionData = (dataBlob,sectionID)=>{
      return dataBlob[sectionID]
    };

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

    return{
      loaded:false,
      dataSource: new ListView.DataSource({
        getSectionData  :getSectionData,
        getRowData      :getRowData,
        rowHasChanged   :(row1, row2)=> row1 !== row2,
        sectionHeaderHasChanged :(s1, s2)=> s1 !== s2
      })
    }
  },
  render(){
    return(
    <View style={styles.outViewStyle}>
      <View style={styles.headViewStyle}>
        <Text style={styles.headerTitleStyle}>汽车品牌列表</Text>
      </View>
      <ListView
        dataSource={this.state.dataSource}
        style={styles.listViewStyle}
        renderRow={this.renderRow}
        renderSectionHeader={this.renderSectionHeader}
      />
    </View>
    )
  },
  //
  renderRow(rowData, sectionID, rowID){
    return(
      <TouchableOpacity activeOpacity={0.5}>
        <View style={styles.rowStyle}>
          <Image source={{uri:rowData.icon}} style={styles.carImageStyle}/>
          <Text style={styles.rowTitleStyle}>{rowData.name}</Text>
        </View>
      </TouchableOpacity>
    )
  },
  //
  renderSectionHeader:function(sectionData, sectionID){
    return(
      <View style={styles.sectionStyle}>
        <Text style={styles.sectionTitleStyle}>{sectionData}</Text>
      </View>

    )
  },
  componentDidMount(){
    this.loadDataFromJson();
  },
  loadDataFromJson(){
    //json数据
    var jsonData=carData.data;
    console.log(jsonData);
    //定义相关变量
    var dataBlob={},
      sectionIDs=[],
      rowIDs=[],
      cars=[]
    for(var i=0; i<jsonData.length; i++){
      sectionIDs.push(i+1);
      dataBlob[i+1]=jsonData[i].title;
      cars=jsonData[i].cars;
      rowIDs[i]=[];
      for(var j=0; j<cars.length; j++){
        //设置行标识
        rowIDs[i].push(j);
        //根据唯一的组加行标识把数据放入dataBlob中
        dataBlob[i+1 + ':' + j] = cars[j];
      }
    }
    this.setState({
      dataSource:this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs, rowIDs)
    });
  },


});

const styles=StyleSheet.create({
  outViewStyle:{


  },
  headViewStyle:{
    width: 375,
    height: 64,
    alignItems:'center',
    justifyContent:'center',
    borderBottomWidth: 1,
    borderBottomColor: '#dddddd'
  },
  rowStyle:{
    flexDirection: 'row',
    alignItems:'center',
    borderBottomWidth: 1,
    borderBottomColor: '#dddddd'
  },
  carImageStyle:{
    width:50,
    height:50,
    margin:10
  },
  rowTitleStyle:{
    fontSize: 20,
    color: 'red',
  },
  headerTitleStyle:{
    marginTop: 10,
    fontSize: 20,
    // backgroundColor: 'red'
  },
  lineViewStyle:{

  },
  listViewStyle:{

  },
  sectionStyle:{
    width: 375,
    height: 20,
    alignItems:'center',
    justifyContent:'center'
  },
  sectionTitleStyle:{
    fontSize: 18,
  }
});


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