前端之家收集整理的这篇文章主要介绍了
React Native 基础篇之 ListView 九宫格实现，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_
404_0@/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React,{ Component } from 'react';
import {
AppRegistry,StyleSheet,TextInput,ListView,TouchableOpacity,Image,ScrollView,Text,Alert,View
} from 'react-native';
//导入数据
import ShareData from "./shareData.json";
//
获取屏幕宽度
let Dimensions = require("Dimensions");
let {width} = Dimensions.get('window');
//常量设置
let cols = 3;
let cellWH =100;
let vMargin = (width-cellWH*cols)/(cols+1);
let hMargin = 20;
export default class listViewSpeedDial extends Component {
constructor(props){
super(props);
//1.设置数据源
let ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2});
//2.设置返回数据
this.state = {dataSource:ds.cloneWithRows(ShareData.data)};
thiz = this;
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
contentContainerStyle={styles.listViewStyle}
/>
);
}
_renderRow(rowData,sectionID,rowID,highlightRow){
return(
<TouchableOpacity activeOpacity={0.5} onPress={()=>{thiz._onPress(rowData.title)}}>
<View style={styles.innerViewStyle}>
<Image source={{uri:rowData.icon}} style={styles.iconStyle}/>
<Text>{rowData.title}</Text>
</View>
</TouchableOpacity>
);
}
_onPress(e) {
alert(">>>点击 "+e);
}
}
const styles = StyleSheet.create({
listViewStyle:{
flexDirection:'row',flexWrap:'wrap',
},iconStyle:{
width:80,height:80,},innerViewStyle:{
width:cellWH,height:cellWH,marginLeft:vMargin,marginTop:hMargin,alignItems:'center',}
});
代码 链接：http://pan.baidu.com/s/1eSpCz4I 密码：18z4
