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 相关文章推荐
按钮JS复制文本框和表格的代码
Apr 01 Javascript
js Date概念详细介绍
Nov 22 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 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
ThinkPHP之getField详解
2014/06/20 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP实现的策略模式示例
2019/03/20 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
详解CommonJS和ES6模块循环加载处理的区别
2018/12/26 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
Ruby元编程基础学习笔记整理
2016/07/02 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
Python装饰器简单用法实例小结
2018/12/03 Python
python selenium 弹出框处理的实现
2019/02/26 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
python实现经纬度采样的示例代码
2020/12/10 Python
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
高一自我鉴定
2013/12/17 职场文书
酒店出纳岗位职责
2013/12/29 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
寄语十八大感言
2014/02/07 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
节约用水倡议书
2014/04/16 职场文书
企业文化标语大全
2014/06/10 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书