[RN] React Native 使用 FlatList 实现九宫格布局 GridList

React Native 使用 FlatList 实现九宫格布局

先看图片演示实例：

 

 

本文以图片列表为例，实现九宫格布局！

主要有两种方法：

1）方法一：

利用FlatList的

numColumns ={
   2} // 一行2个

 

2）方法二：

利用 FlatList的

contentContainerStyle={styles.listViewStyle}

其中样式如下：

listViewStyle: {
    
// 主轴方向
    flexDirection: 'row',
 // 一行显示不下,换一行
 flexWrap: 'wrap',
 // 侧轴方向
 alignItems: 'center', // 必须设置,否则换行不起作用
},

 

当然，有一个重要的前提是，列表中的元素宽度 当然也要设置为宽度的 1/N，

 

看实际使用例子代码：

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

import styles from '../../style/ImageStyle';
import ArrUtil from '../../util/ArrUtil';
import HttpRequest from '../../common/HttpRequest';

const baseUrl = 'https://raw.githubusercontent.com/wukong1688/RN-AppNews/master/apk/data/image_list_';

const screenWidth = Dimensions.get('window