之前只是使用View来做的九宫格,都实现了,为啥还要使用ListView来做呢?就像iOS中的 table 一样,优化的好呀,做起来也更方便,哈,废话不多说,来看看代码
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ListView,
TouchableOpacity, //不透明度触摸
AlertIOS
} from 'react-native';
//导入json数据
var shareData = require('./shareData.json');
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
var screenWidth = Dimensions.get('window').width;
//一些常量设置
var cols = 3;
var cellWH = 100;
var vMargin = (screenWidth - cellWH * cols) / (cols + 1);
var hMargin = 25;
var listViewNine = React.createClass({//类名一定要大写开头
//设置默认值(固定值,上下级界面数据的顺传)
getDefaultProps() {
},
//设置一些初始值(可以变化的)
getInitialState() {
//创建数据源
var ds = new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2});
return {
dataSource: ds.cloneWithRows(shareData.data)
}
},
//渲染页面
render(){
return(
)
},
//单独的cell
renderRow(rowData, sectionTD, rowID, highlightRow){
return(
{AlertIOS.alert('哈哈')}}>
{rowData.title}
)
}
})
const styles = StyleSheet.create({
listViewStyle:{
// 改变主轴的防线
flexDirection:'row',
// 多行显示
flexWrap:'wrap',
alignItems: 'flex-start'
},
innerViewStyle:{
width:cellWH,
height:cellWH,
marginLeft:vMargin,
marginTop:hMargin,
// 居中
alignItems:'center',
justifyContent:'center',
},
iconStyle:{
width:80,
height:80
},
titleStyle:{
marginTop:5,
fontSize:15
}
});
//输出类
module.exports = listViewNine;
这个地方有一个坑,只设置属性flexWrap为wrap不起作用,找了半天才发现,由于在rn 0.28之后的版本上官方已经修改了flexWrap:'wrap'的工作方式了,之前版本的是flexWrap:'wrap'和默认的alignItems: 'stretch'是一起工作的;如果是0.28之后的版本,你需要加上alignItems: 'flex-start' ,这样就OK了,来看效果