做Android的人都知道，Android有一種控件叫GridView熊锭，可以用來展示圖片幌衣，類似于9宮格效果，而在react native中郎逃，我們要用FlatList實(shí)現(xiàn)這種效果~

sybil052-20180926-151732.png

FlatList屬性

實(shí)現(xiàn)思路

sybil052-20180926-153034@2x.png

如圖匀泊，每行顯示3個圖片，總共有4個間隔朵你，間隔距離我們給固定值各聘，以此類推，如果顯示cols個圖片抡医，間隔數(shù)為cols+1躲因，我們需要據(jù)此計(jì)算圖片寬度。
假設(shè)：列數(shù)cols = 3忌傻，左右邊距l(xiāng)eft = 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;

// 一些常量設(shè)置
const cols = 3; // 列數(shù)
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,
        // 文字內(nèi)容居中對齊
        alignItems:'center'
    },
    iconStyle:{
        width: ImageWH,
        height: ImageWH * 0.8,
    },
});

function mapStateToProps(state){
    return {};
}

function mapDispatchToProps (dispatch){
    return {};
}

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