使用ListView 简单实现九宫格效果:
/**
*
* ListView 实现 九宫格 效果
* */
import React, {Component} from 'react';
import {
View,
Text,
Image,
StyleSheet,
ListView,
TouchableOpacity,
Alert,
} from 'react-native';
import ImageHotData from '../data/imageHotData.json';
var {width, height} = require('Dimensions').get('window');
var cols = 3;
var cellWH = width/4;
var hMargin = (width - cols * cellWH) / (cols + 1);
var vMargin = 25;
export default class ListView9Square extends Component {
constructor(props) {
super(props)
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
DS: ds.cloneWithRows(ImageHotData.data),
};
console.log(this.state.DS);
}
static defaultProps = {
//三列展示
}
render() {
return (
<ListView
dataSource={this.state.DS}
renderRow={this.renderRow}
contentContainerStyle={styles.listViewStyle}/>
);
}
//单独的Cell
renderRow(rowData) {
return (
<TouchableOpacity activeOpacity={0.5}
onPress={() => Alert.alert(
'Alert Title',
rowData.title,
[
{text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'OK', onPress: () => console.log('OK Pressed')},
],
{cancelable: false}
)}>
<View style={styles.innerViewStyle}>
<Image source={{uri: rowData.img}} style={styles.iconStyle}></Image>
<Text>{rowData.title}</Text>
</View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
listViewStyle: {
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'center',
},
iconStyle: {
width: cellWH,
height: cellWH,
},
innerViewStyle: {
width: cellWH,
height: cellWH+20,
marginLeft: hMargin,
marginTop: vMargin,
alignItems: 'center'
},
});
不论大神还是新手,欢迎加QQ群一起讨论问题学习技术:230274309