ReactNative 中 ListView实现GridView效果

在RN中ListVIew拥有ScrollView的所有属性，所以可以吧ListView当成是ScrollView的一种延伸，在RN中虽然不存在父子类，不过我觉的可以把 ListView当成ScrollView的子类来看。
所以改变ListView的排列方式其实就是改变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,
    AlertIOS
} from 'react-native';

var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
var {height} = Dimensions.get('window');

var shareData = require('./shareData.json').data;

var GridView = React.createClass({

    getDefaultProps(){
return{
// ..ListView.propTypes
        }
    },

    getInitialState(){

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

return {
dataSource:ds.cloneWithRows(shareData)
 }
 },


render(){
return (
 <ListView
 dataSource={this.state.dataSource}
 renderRow={this.renderRow}
 contentContainerStyle={styles.listStyle}
 showsVerticalScrollIndicator={false}
 showsHorizontalScrollIndicator={false}
 />
 )
 },

// 返回Item试图
renderRow(rowData,sectionId,rowId,hItemId){
return(
 <TouchableOpacity
 style={styles.itemViewStyle}
 onPress={() => {AlertIOS.alert(rowId)}}
 >
 <View style={styles.itemViewStyle}>
 <Image source={{uri:rowData.icon}} style={styles.itemIconStyle}/>
 <Text style={styles.itemTitleStyle}>{rowData.title}</Text>
 </View>
 </TouchableOpacity>
 )
 }
})

const styles = StyleSheet.create({
 listStyle:{
 flexDirection:'row', //改变ListView的主轴方向
 flexWrap:'wrap', //换行
 },
 itemViewStyle:{
 alignItems:'center', //这里要注意，如果每个Item都在外层套了一个 Touchable的时候，一定要设置Touchable的宽高
 width: width / 3,
 height:100
 },
 itemIconStyle:{
 width:60,
 height:60
 },
 itemTitleStyle:{
 marginTop:8
 }
});

module.exports = GridView;