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函数
Jul 21 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
vue实现购物车小案例
Sep 27 Javascript
JavaScript实现省份城市的三级联动
Feb 11 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
php过滤表单提交的html等危险代码
2014/11/03 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
2014/06/06 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Python脚本实现网卡流量监控
2015/02/14 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
高中军训感想
2015/08/07 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技