react-native FlatList实现GridView效

做Android的人都知道，Android有一种控件叫GridView，可以用来展示图片，类似于9宫格效果，而在react native中，我们要用FlatList实现这种效果~

sybil052-20180926-151732.png

FlatList属性

属性	作用
horizontal	true 则变为水平布局模式
columnWrapperStyle	如果设置了多列布局，则可以额外指定此样式作用在每行容器上
numColumns	多列布局，此时组件内元素会从左到右从上到下按 Z 字形排列，类似启用了flexWrap的布局，但只能在非水平模式下使用

实现思路

sybil052-20180926-153034@2x.png

如图，每行显示3个图片，总共有4个间隔，间隔距离我们给固定值，以此类推，如果显示cols个图片，间隔数为cols+1，我们需要据此计算图片宽度。
假设：列数cols = 3，左右边距left = 10, 上下间距top = 10,那么图片宽度ImageWH = (screenW - (cols + 1) * left) / cols，图片高度ImageH = ImageWH * 0.8

具体代码

import React, {PureComponent} from 'react';
import {connect} from 'react-redux';
import {
    View,
    StyleSheet,
    FlatList,
    Dimensions,
    TouchableOpacity,
    Image
} from 'react-native'
import Text from '../../components/common/scalingText';
import * as Color from '../../constants/colors';
import NavigationBar from '../../components/navigationBar/navigationBar';

const screenW = Dimensions.get('window').width;

// 一些常量设置
const cols = 3; // 列数
const left = 10; // 左右边距
const top = 10; // 上下边距
const ImageWH = (screenW - (cols + 1) * left) / cols; // 图片大小

class UploadInfo extends PureComponent {
    constructor(props) {
      super(props);
      const params = this.props.navigation.state.params;
      this.state={
        title: params.title,
        data:[
            {uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850063217&di=1c4962aad6a64fd2f4a381de8d05d595&imgtype=0&src=http%3A%2F%2Fimg15.3lian.com%2F2015%2Ff2%2F8%2Fd%2F96.jpg'},
            {uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850063216&di=0f4f9bbaaee6bafe24fab3e5f472c481&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201512%2F12%2F20151212120309_BduTC.jpeg'},
            {uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850063214&di=f73de557becc9667bb105fdfecd39426&imgtype=0&src=http%3A%2F%2Fimgq.duitang.com%2Fuploads%2Fitem%2F201503%2F22%2F20150322171820_UtwMk.thumb.700_0.jpeg'},
            {uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850063212&di=8db8ff9787b8bd7224908126d5419e41&imgtype=0&src=http%3A%2F%2Fwww.qqwangming.org%2Fuploads%2F71f459727f5055a0%2F8.jpg'},
            {uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850063210&di=b936ead7972601ea0c12e8648a8f1df0&imgtype=0&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140403%2F0020033029624335_b.jpg'},
            {uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850155795&di=72f9878782ad4b80ea320111effe0b71&imgtype=0&src=http%3A%2F%2Fpic27.photophoto.cn%2F20130420%2F0005018421916914_b.jpg'},
            {uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850155794&di=4efaecca3f367346ff49c42f8f89d9f2&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201206%2F26%2F20120626190359_MjB3s.thumb.700_0.jpeg'}
        ]
      }
      this.renderRow = this.renderRow.bind(this);
    }
    componentDidMount() {

    }
    
    // 返回cell
    renderRow(rowData){
        console.log('rowData',rowData)
        return(
            <TouchableOpacity 
                activeOpacity={0.8} 
                onPress={()=>{
                    this.props.navigation.push('ImageViewer',{
                        hideDelete: true,
                        image: this.state.data,
                        num: rowData.index,
                    });
                }} 
            >
                <View style={styles.innerViewStyle}>
                    <Image source={{uri:rowData.item.uri}} style={styles.iconStyle} />
                </View>
            </TouchableOpacity>
        );
    }

    _keyExtractor = (item, index) => {
        return item.uri + index
    }

    render() {
        return (
            <View style={styles.container}>
                <NavigationBar
                    title={this.state.title}
                    hiddenBackIcon={false}
                    router={this.props.navigation}
                />
                <FlatList
                    style={{backgroundColor: Color.WHITE_FFFFFF}}
                    renderItem={this.renderRow}
                    data={this.state.data}
                    keyExtractor={this._keyExtractor}
                    numColumns={cols}
                    columnWrapperStyle={styles.columnStyle}
                    horizontal={false}
                />
            </View>
        );
    }
}

const styles =StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Color.GRAY_F0F2F5
    },
    columnStyle:{
        // marginLeft: 10,
        // marginRight: 10
    },
    innerViewStyle:{
        width: ImageWH,
        height: ImageWH * 0.8,
        marginLeft: left,
        marginTop: top,
        // 文字内容居中对齐
        alignItems:'center'
    },
    iconStyle:{
        width: ImageWH,
        height: ImageWH * 0.8,
    },
});

function mapStateToProps(state){
    return {};
}

function mapDispatchToProps (dispatch){
    return {};
}

export default connect(mapStateToProps, mapDispatchToProps)(UploadInfo);