React Native之ListView实现九宫格效果

概述

在安卓原生开发中,ListView是很常用的一个列表控件,那么React Native(RN)如何实现该功能呢?我们来看一下ListView的源码

ListView是基于ScrollView扩展得来的,所以具有ScrollView的相关属性:

dataSource:数据源,类似于安卓中我们传入BaseAdapter的数据集合。 renderRow:渲染某一行,类似于BaseAdapter中的getItem方法。 onEndReached:简单说就是用于分页操作,在安卓中原生开发中,我们需要自己实现相应的方法。 onEndReachedThreshold:调用onEndReached之前的临界值,单位是像素。 refreshControl:指定RefreshControl组件,用于为ScrollView提供下拉刷新功能。(该属性是继承与ScrollView) renderHeader:渲染头部View,类似于安卓ListView中的addHeader. 以上的属性基本可以解决一些常见的列表需求,如果我们想要实现网格的效果,也可以借助该组件来实现,有点类似于安卓中的RecyclerView控件。 pageSize:渲染的网格数,类似于安卓GridView中的numColumns. contentContainerStyle:该属性是继承于ScrollView,主要作用于该组件的内容容器上。

要用ListView实现九宫格的效果:

1,配置pageSize确认网格数量

<ListView  
      automaticallyAdjustContentInsets={false}  
      contentContainerStyle={styles.grid}  
      dataSource={this.state.dataSource}  
      renderRow={this.renderRow.bind(this)}  
      pageSize={3}  
      refreshControl={  
         <RefreshControl  
           onRefresh={this.onRefresh.bind(this)}  
           refreshing={this.state.isLoading}  
           colors={['#ff0000', '#00ff00', '#0000ff']}  
           enabled={true}  
           />  
       }  
      /> 

2,设置每一个网格的宽度样式

itemLayout:{  
   flex:1,  
   width:Util.size.width/3,  
   height:Util.size.width/3,  
   alignItems:'center',  
   justifyContent:'center',  
   borderWidth: Util.pixel,  
   borderColor: '#eaeaea'  
 },  

3,设置contentContainerStyle相应属性

grid: {  
   justifyContent: 'space-around',  
   flexDirection: 'row',  
   flexWrap: 'wrap'  
 }, 

这里需要说明下,由于ListView的默认方向是纵向的,所以需要设置ListView的contentContainerStyle属性,添加flexDirection:‘row’

其次,ListView在同一行显示,而且通过flexWrap:’wrap’设置自动换行。

注:flexWrap属性:wrap、nowrap,wrap:空间不足的情况下自动换行,nowrap:空间不足,压缩容器,不会自动换行。

以下是完整代码:

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 ListViewDemo = 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('ListViewDemo', () => ListViewDemo);

效果如图(数据源自己加)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏郭霖

Android高级图片滚动控件,编写3D版的图片轮播器

大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博客了,我也是深感惭愧。那么今天的这篇既然是阔别了一个多月的文章,当然要带来更加给力点的内容了...

85880
来自专栏向治洪

Android仿网易云音乐播放界面

概述 网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅。这里抛砖引玉,原文地址:http://www.jianshu.co...

1.3K100
来自专栏QQ音乐技术团队的专栏

小窗播放视频的原理和实现(上)

本文对小窗视频播放进行了详细的研究,针对几种实现方案进行了深入的对比分析,进而给出实现小窗视频播放的最优解。

4.3K150
来自专栏Android机动车

Android 约束布局ConstraintLayout1.1.0 版详解

在http://dyg8.com/20180205/Android-ConstraintLayout-Detailed/这篇文章中,我们对 Constraint...

13540
来自专栏Alice

一个layer可以跟着画完的线移动ios程序 好玩啊。

用法:采用的是关键帧实现的。    实验目的:让上层的layer子层能够跟着在另一个子层上花的线进行移动 。即当线画完之后,图形开始移动,并且能够停在最后的那个...

23160
来自专栏Android 开发学习

NestedScrollView 嵌套 ListView 实现滑动折叠效果

74750
来自专栏Coding迪斯尼

VUE+WebPack游戏设计:实现盒子爆破效果和界面美化

18430
来自专栏落影的专栏

直播APP常用动画效果

介绍 记录、总结开发遇到一些问题,大家一起交流学习。 这次带来,对直播APP的常用动画总结。 直播Live 效果展示 下面是一个很多平台都有的入门豪华礼物动...

58880
来自专栏LeoXu的博客

[读书笔记]响应式web设计 转

@media screen and (max-device-width:400px){ 

10910
来自专栏Android 技术栈

Android - 仿网易云音乐歌单详情页

前段时间模仿网易云音乐UI使用DataBinding做了一个App:CloudReader,今天把其中的类似歌单详情页单独拿出来说一下,我觉得其中还是有些干货的...

16610

扫码关注云+社区

领取腾讯云代金券