ReactNative 中 ListView实现GridView效果

无需原生开发基础，也能完美呈现京东商城。《混合开发京东商城系统，提前布局大前端》课程融合vue、Android、IOS等目前流行的前端和移动端技术，混合开发经典电商APP——京东。课程将各种复杂功能与知识点完美融合，从技术原理到开发上线，让你真实感受到一个明星产品开发的全过程。功能实现之外，还有一流用户体验和优秀交互设计等你一探究竟，拓宽开发眼界。

---

在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;