ReactNative 制作九宫格类的列表

在iOS中 我们可以利用 UICollectionView 来制作九宫格栏类似的界面，下面介绍在RN 中 制作九宫格的方法：

1：如果不需要分组只是简单九宫格 ，可以直接用 FlatList 实现,先上效果图：

image.png

代码：

import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, FlatList, TouchableHighlight, SectionList, Dimensions} from 'react-native';

const dimension = Dimensions.get('window')
class CellList extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        var theModel = this.props.itemModel
        return (
            <View style={styles.cellContainer}>
                <Image
                    source={{uri: theModel.iconUrl}}
                    style={styles.cellImg}/>
                <View
                    style={styles.cellTitleViewStyle}
                >
                    <Text style={{padding:5.0}}>标题标题</Text>
                    <Text style={{padding:5.0}}>姓名：{theModel.key}</Text>
                </View>
            </View>
        )
    }
}

export default class TableListView extends Component<Props> {
    _renderItem = ({item}) => (
        <CellList
            itemModel = {item}
        />
    )
    _headerItem = () =>(
        <View style={styles.headerStyle}>
            <Text
                style={{fontSize:18.0}}
            >我是一个标题</Text>
        </View>
    )
    render() {
          var theModel = {
              key: 'Devin',
              detailDes:'是的水电费水电费水电费水电费水电费水电费',
            iconUrl:'https://img.52z.com/upload/news/image/20180212/20180212084623_32086.jpg'};
        return (
            <View>
                <FlatList
                    renderItem={this._renderItem}
                    data={[theModel,theModel,theModel,theModel,theModel,theModel,theModel,theModel]}
                    numColumns={3}
                    keyExtractor={(item, index) => item + index}
                    ListHeaderComponent={this._headerItem}
                />
            </View>
        );
    }
}
//样式
const styles = StyleSheet.create({
    headerStyle:{
        marginTop:50.0,
        marginBottom:10.0,
        height:50.0,
        justifyContent:'center',
        backgroundColor:'lightgray'
    },
    cellContainer: {
        //flex:1, // 空间平均分布
        alignItems:'center',
        width:dimension.width/3.0
    },
    cellTitleViewStyle:{
        justifyContent: "center"
    },
    cellImg: {
        width: 80,
        height: 80,
        borderRadius: 40.0,
    },
})

重点：设置 numColumns 属性，限定每一行显示多少个。 还有要设置单个 栏目的 width, 比如我这里没行3个，那就要设置 width:dimension.width/3.0 ，有看到网友说 设置 //flex:1, // 空间平均分布 就可以了， 但是用这种方法会造成 最后栏也居中的问题：如图

image.png

2：如果我们需要分组的九宫格，那就只能使用：SectionList:效果图

image.png

重点：要注意设置，contentContainerStyle={styles.sectionViewStyle} 手动布置item 的显示方式，

//列表的布局样式
sectionViewStyle: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start',
},
这段代码是关键
同时需要注意设置 ListHeaderComponent和ListFooterComponent 的 width 为 屏幕宽，不然会造成布局错乱，网上也有另一种 使用 Map 实现的方法， 我没能成功，就没写了。

初学者记录，大神勿喷