React Native Listview 类似流水布局

原来写的代码太乱，自己精简了一下，有需要的可以参考下，互相学习

• 下面是效果

1.gif

-代码如下

'use strict';
/**

• by 猴哥
  **/
  var React = require('react');
  var ReactNative = require('react-native');
  var {
  StyleSheet,
  View,
  Text,
  Image,
  AsyncStorage,
  PixelRatio,
  ListView,
  Platform,
  } = ReactNative;
  var Util = require('../util/utils');
  var {DEV} = Util;
  var TEMPData = [
  {name:'1',color:'red'},
  {name:'2',color:'green'},
  {name:'3',color:'red'},
  {name:'4',color:'green'},
  {name:'5',color:'red'},
  {name:'6',color:'green'},
  {name:'6',color:'red'},
  {name:'7',color:'green'},
  {name:'8',color:'red'},
  {name:'9',color:'green'},
  {name:'1',color:'red'},
  {name:'2',color:'green'},
  {name:'3',color:'red'},
  {name:'4',color:'green'},
  {name:'5',color:'red'},
  {name:'two',color:'green'},
  {name:'6',color:'red'},
  {name:'7',color:'green'},
  {name:'8',color:'red'},
  {name:'9',color:'green'},
  ];
  let Home = React.createClass({
  statics: {
  title: '',
  description: '',
  id: 'Home',
  },
  getInitialState(){
  return{
  dataSource : new ListView.DataSource({
  rowHasChanged : (row1, row2) => row1 !== row2
  }),
  }
  },
  componentDidMount() {
  this.fetchData();
  },
  fetchData(){
  this.setState({
  dataSource: this.state.dataSource.cloneWithRows(TEMPData),
  });
  },
  _renderRow(dataSource){
  return(
  <View>
  <View style={styles.cell}>
  <View style={[styles.img,{backgroundColor:dataSource.color,}]}/>
  <Text style={{color:'#120d0d',fontSize:13,marginTop:10}}>
  {dataSource.name}
  </Text>
  </View>
  </View>
  );
  },
  render() {
  return(
  <View style={styles.container}>
  <ListView
  contentContainerStyle={{
  flexWrap:'wrap',
  flexDirection:'row'}}
  pageSize={50}
  dataSource={this.state.dataSource}
  renderRow={this._renderRow}
  showsVerticalScrollIndicator={false}
  >
  </ListView>
  </View>
  )
  }
  });
  let styles = StyleSheet.create({
  container:{
  flex:1,
  backgroundColor:'white',
  },
  cell:{
  justifyContent: 'center',
  width:Util.size.width/3,
  height:100,
  alignItems: 'center',
  borderWidth: 1/ PixelRatio.get(),
  borderColor: '#CCC',
  },
  img:{
  alignSelf:'center',
  width:30,
  height:30,marginTop:10
  },
  });
  module.exports = Home;

• Util文件代码如下

'use strict';

/**
* 帮助工具类
*
*/

var React = require('react');
var ReactNative = require('react-native');
var {
Alert,
Platform,
Dimensions,
PixelRatio,
NativeModules,
} = ReactNative;
var Store = require('react-native-simple-store');
var Icon = require('react-native-vector-icons/Ionicons');
var Util ={
DEV:true,
//单位像素比
pixel: 1 / PixelRatio.get(),
//屏幕尺寸
size: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
},
};
module.exports = Util;