ReactNative实现分区瀑布流

效果如图

屏幕快照 2017-07-06 下午2.42.37.png

屏幕快照 2017-07-06 下午2.58.55.png

屏幕快照 2017-07-06 下午2.59.45.png

代码与逻辑实现,注释掉的部分是实现不分区的瀑布流

import React,{Component} from 'react'
import {
    View,
    AlertIOS,
    TouchableHighlight,
    Button,
    ActivityIndicator,
    StyleSheet,
    Alert,
    Text,
    Image,
    ListView,
    Dimensions,
    TouchableOpacity,
    RefreshControl

} from 'react-native'
let width = Dimensions.get('window').width
export default class ListViewDemo extends Component {


constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2,
    sectionHeaderHasChanged:(s1,s2)=>s1!==s2
});
    this.state = {
        
      dataSource: ds.cloneWithRowsAndSections({section1:[
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第11行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第12行"},
        ],section2:[
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第21行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第22行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第23行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第24行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第25行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第26行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第27行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第28行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第29行"},
    
    
        ],section3:[
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第31行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第32行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第33行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第34行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第35行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第36行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第37行"},
    
    
        ]
    ,section4:[
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第41行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第42行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第43行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第44行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第45行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第46行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第47行"},
    
    
        ]
    ,section5:[
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第51行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第52行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第53行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第54行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第55行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第56行"},
    {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第57行"},
    
    
        ]}),

        loading:false,

// dataSource: ds.cloneWithRows([
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第一行hhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hd"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第二行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第三行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第一行hhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hd"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第二行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第三行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第一行hhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hd"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第二行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第三行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第一行hhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hd"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第二行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第三行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第一行hhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hd"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第二行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第三行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第一行hhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hd"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第二行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第三行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第一行hhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hd"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第二行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第三行"},
//         {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第二行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第三行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第一行hhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hdhttp://live.weibo.com/play?id=1042097:8215469e64c3af44c2d188e3b555428b&type=hd"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第二行"},
//     {logo:'https://facebook.github.io/react/img/logo_small.png',name:"第三行"},
//         ])

    };
  }

_onRefresh(){
this.setState({
    loading:true
})
var _this = this;
setTimeout(function() {
    _this.setState({
        loading:false,
    })
}, 3000);
}

render() {
        return (
        
             this._renderRow(rowData)}
                    //{/*renderRow={(rowData,rowId,sectionId) => }*/}
                    renderSectionHeader={(sectionData,sectionId) => this._renderHeader(sectionData,sectionId)}
                    refreshControl={
                        
                        
                    }
                    
                    />
      
        )

}

_renderRow(Data){
  return(
    
  )  
}

sectionPress(sectionId){
        Alert.alert(sectionId);
    }

_renderHeader(sectionData,sectionId){
    if(sectionData && sectionId){
      return (
           { this.sectionPress(sectionId);}}>
            
              
                
                888888
                更多
                
              
            
            
      )
    }else{
      return false
    }
  }


}

class CellView extends Component {
  render(){
    return(
        
            
                
                    
                        图片里的文章
                    
                    
                
                {this.props.rowD}
                
                    

                副标题
                    
                
            
      
    );
  }
  onButtonPress(){
            Alert.alert(this.props.rowD);
        }
    
}

// class CellView extends Component {
//   render(){
//     return(
//     //   
//     

//         
//         {/*{this.props.rowD}*/}

//       
//     );
//   }
// }

const styles = StyleSheet.create({
    container: {
        marginTop:64,
        flex: 1
    },
    row: {  
        justifyContent: 'center',  
        // padding: 6,  
        // margin: 3,  
        width: (width-18)/3,   
        height: width/3,    
        backgroundColor: '#F6F6F6',  
        alignItems: 'center',  
        borderWidth: 1,  
        borderRadius: 5,  
        borderColor: '#CCC'   
  },  
    grid: {    
            marginTop:5,
        flexDirection: 'row',   
        justifyContent: 'flex-start',  
        flexWrap: 'wrap', 
        alignItems: 'center'
    },  
    itemLayout:{
        margin:7.5,       
       width:(width-30)/2,    
       height:((width-30)/2)*9/16 + 36,    
    //    alignItems:'center',    
    //    justifyContent:'center',    
       borderWidth: 0.5,    
       borderColor: '#eaeaea',   
     },  
     conter: {  
        justifyContent: 'flex-start',  
        // padding: 6,  
        // margin: 3,  
        width:(width-30)/2,    
        height:((width-30)/2)*9/16,    
        backgroundColor: '#5c6bc2',    
  },  
  image: {
        width:(width-30)/2,    
        height:((width-30)/2)*9/16, 
}, 
text: {
    width:(width-30)/2,    
    height:20, 
    padding:3
},  
subText: {
    width:(width-30)/2 - 15,   
    height:20, 
    fontSize:10,
    marginLeft:6,
    color:'#808080',
},  
botmView:{
    width:(width-30)/2 - 15,    
    height:20, 
    flexDirection:'row',
    marginTop:5
},
imageText: {
    width:(width-30)/2 - 15,   
    fontSize:10,
    position:'absolute',
    left:5,
    bottom:5,
    color:'#fff',

}, 
});