React Native之ListView實現(xiàn)九宮格效果的示例

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

itemLayout:{ 
 flex:1, 
 width:Util.size.width/3, 
 height:Util.size.width/3, 
 alignItems:'center', 
 justifyContent:'center', 
 borderWidth: Util.pixel, 
 borderColor: '#eaeaea' 
 }, 

grid: { 
 justifyContent: 'space-around', 
 flexDirection: 'row', 
 flexWrap: 'wrap' 
 }, 

 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數(shù)據(jù) 
var shareData = require('./shareData.json'); 
 
// 一些常亮設(shè)置 
const cols = 3; 
const cellWH = 100; 
const vMargin = (screenW - cellWH * cols) / (cols + 1); 
const hMargin = 25; 
 
// ES5 
var ListViewDemo = React.createClass({ 
 // 初始化狀態(tài)值(可以變化) 
 getInitialState(){ 
 // 創(chuàng)建數(shù)據(jù)源 
 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', 
 // 側(cè)軸方向 
 alignItems:'center', // 必須設(shè)置,否則換行不起作用 
 }, 
 
 innerViewStyle:{ 
 width:cellWH, 
 height:cellWH, 
 marginLeft:vMargin, 
 marginTop:hMargin, 
 // 文字內(nèi)容居中對齊 
 alignItems:'center' 
 }, 
 
 iconStyle:{ 
 width:80, 
 height:80, 
 }, 
 
}); 
 
AppRegistry.registerComponent('ListViewDemo', () => ListViewDemo);