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);
效果如图(数据源自己加)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Codeforces Round #628 (Div. 2) A~~D
- AtCoder Beginner Contest 160 A ~ E
- SwiftUI:创建底部导航栏 tabBar
- AtCoder Beginner Contest 168 C
- 关于 Executor 和 ExecutorService
- 【队伍训练】Codeforces Round #660 (Div. 2)
- 【队伍训练2】 AtCoder Beginner Contest 165
- C# 的sql server like 的参数
- sql server 字符串替换函数REPLACE
- sql server 更新两个表的某个字段
- HTML 引用Css样式的四种方式
- Java也可以像python般range出连续集合
- c# dev控件 gridcontrol 数据跟随鼠标滚轮滚动也可以编辑
- Apollo(阿波罗)配置中心Java客户端使用指南使用指南
- DevExpress.LookUpEdit控件实现自动搜索定位功能 兼使用方法(looUpEdit可编辑)