用ListView实现九宫格布局

最新推荐文章于 2021-07-14 22:22:42 发布

原创最新推荐文章于 2021-07-14 22:22:42 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#listview

React Native 专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何在 React Native 中实现横向滚动的 ListView，并通过代码示例展示了设置 contentContainerStyle 属性来实现多行横向显示的效果。

相关技术点：
通常情况下，我们对ListView的操作是纵向的，如果是横向的，则需要设置ListView的contentContainerStyle属性，添加flexDirection:‘row’让多个ListView在同一行显示，而且通过flexWrap:’wrap’进行换行。

运行效果图：
这里写图片描述
代码如下：

/**
 * 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');
const screenW = Dimensions.get('window').width;

// 导入json数据
var shareData = require('./shareData.json');

// 一些常亮设置
const cols = 3;
const cellWH = 100;
const vMargin = (screenW - cellWH * cols) / (cols + 1);
const hMargin = 25;

// ES5
var ListViewDemo2 = React.createClass({
    // 初始化状态值(可以变化)
    getInitialState(){
        // 创建数据源
        var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});
       return{
           dataSource:ds.cloneWithRows(shareData.data)
       }
    },

    render(){
        return(
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderRow}
                contentContainerStyle={styles.listViewStyle}
            />
        );
    },

    // 返回cell
    renderRow(rowData){
        return(
            <TouchableOpacity activeOpacity={0.8} onPress={()=>{AlertIOS.alert('点击了')}} >
                <View style={styles.innerViewStyle}>
                    <Image source={{uri:rowData.icon}} style={styles.iconStyle} />
                    <Text>{rowData.title}</Text>
                </View>
            </TouchableOpacity>
        );
    },
});

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

    innerViewStyle:{
        width:cellWH,
        height:cellWH,
        marginLeft:vMargin,
        marginTop:hMargin,
        // 文字内容居中对齐
        alignItems:'center'
    },

    iconStyle:{
        width:80,
        height:80,
    },

});

AppRegistry.registerComponent('ListViewDemo2', () => ListViewDemo2);