React Native 基础篇之 ListView 九宫格实现

来源：互联网发布：店铺淘宝客怎么找商品编辑：程序博客网时间：2024/06/01 07:58

/** * 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

0 0