React Native之ListView实现九宫格效果的示例


Posted in Javascript onAugust 02, 2017

概述

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

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

React Native之ListView实现九宫格效果的示例

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);

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

React Native之ListView实现九宫格效果的示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
几个有趣的Javascript Hack
Jul 24 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
React Hooks的深入理解与使用
Nov 12 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
electron实现静默打印的示例代码
Aug 12 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 #jQuery
ReactNative列表ListView的用法
Aug 02 #Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 #Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 #Javascript
easyui-datagrid开发实践(总结)
Aug 02 #Javascript
js如何编写简单的ajax方法库
Aug 02 #Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 #Javascript
You might like
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
详解vue2 $watch要注意的问题
2017/09/08 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
python逆向入门教程
2018/01/15 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
为什么要用EJB
2014/04/17 面试题
审核会计岗位职责
2013/11/08 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
入党积极分子群众意见
2015/06/01 职场文书
廉洁自律证明
2015/06/24 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL