ReactNative 中 ListView实现GridView效果

来源：互联网发布：简单网络协议实现编辑：程序博客网时间：2024/06/06 22:24

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

1 0