/*** 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><ListViewdataSource={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(<ListViewdataSource={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);