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;