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 (
        <View style={styles.container}>
            <ListView
                    stickySectionHeadersEnabled={true}
                    initialListSize = {10}
                    automaticallyAdjustContentInsets={false}   
                    dataSource={this.state.dataSource}
                    contentContainerStyle={styles.grid}
                    renderRow={(rowData,rowId,sectionId) => this._renderRow(rowData)}
                    //{/*renderRow={(rowData,rowId,sectionId) => <CellView source={{uri:rowData.logo}} rowD={rowData.name} />}*/}
                    renderSectionHeader={(sectionData,sectionId) => this._renderHeader(sectionData,sectionId)}
                    refreshControl={
                        <RefreshControl
                            onRefesh={this._onRefresh.bind(this)}
                            refreshing={this.state.loading}
                        />
                        
                    }
                    
                    />
      </View>
        )

}

_renderRow(Data){
  return(
    <CellView source={{uri:Data.logo}} rowD={Data.name} />
  )  
}

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

_renderHeader(sectionData,sectionId){
    if(sectionData && sectionId){
      return (
          <TouchableOpacity onPress={() => { this.sectionPress(sectionId);}}>
            <View style={{backgroundColor:'green',height:40}}>
              <View style={{marginTop:0,flexDirection:'row',width:width,backgroundColor:'white',alignItems:'center'}}>
                <Image style={{width:20,height:20,marginLeft:12,backgroundColor:'red'}}/>
                <Text style={{flex:1,marginLeft:4,fontSize:13,fontWeight:'bold',color:'#333333'}}>888888</Text>
                <Text style={{flex:1,marginRight:4,fontSize:12,textAlign:'right',color:'#999999'}}>更多</Text>
                <Image style={{width:8,height:12,marginRight:12,backgroundColor:'red'}}/>
              </View>
            </View>
            </TouchableOpacity>
      )
    }else{
      return false
    }
  }


}

class CellView extends Component {
  render(){
    return(
        <TouchableOpacity onPress={(this.onButtonPress.bind(this))}>
            <View style={styles.itemLayout}>
                <View style={styles.conter}>
                    <Image source={this.props.source}
                        style={styles.image} >
                        <Text style={styles.imageText}>图片里的文章</Text>
                    </Image>
                    
                </View>
                <Text style={styles.text}>{this.props.rowD}</Text>
                <View style={styles.botmView}>
                    <Image source={this.props.source}
                        style={{width:12,height:12,marginLeft:3}} />

                <Text style={styles.subText}>副标题</Text>
                    </View>
                
            </View>
      </TouchableOpacity>
    );
  }
  onButtonPress(){
            Alert.alert(this.props.rowD);
        }
    
}

// class CellView extends Component {
//   render(){
//     return(
//     //   <View style={{alignItems: 'center',width: 40, height: 40, flexDirection:'row',borderBottomWidth:0.5,borderBottomColor:'#e8e8e8'}}>
//     <View style={styles.itemLayout}>

//         <Image source={this.props.source}
//                style={{width: 40,height: 40}} />
//         {/*<Text style={{marginBottom:15,marginTop:15,marginHorizontal:15}} >{this.props.rowD}</Text>*/}

//       </View>
//     );
//   }
// }

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',

}, 
});
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,084评论 6赞 503
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,623评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,450评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,322评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,370评论 6赞 390
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,274评论 1赞 300
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,126评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,980评论 0赞 275
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,414评论 1赞 313
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,599评论 3赞 334
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,773评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,470评论 5赞 344
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,080评论 3赞 327
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,713评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,852评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,865评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,689评论 2赞 354

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,095评论 25赞 707
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,654评论 18赞 139
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,098评论 4赞 62
  • 重视孩子的阅读黄金期！
    喂书长大的孩子注定与众不同，腹有诗书气自华，腹有诗书行天下！ 阅读的效果从来都不是立竿见影的，然而它却能一点一滴地...
    阳光所指阅读 289评论 0赞 1
  • 温度
    文/山雨 还是那座城 那座楼 那个房间 从春天走到现在 从陌路走到一起 你选择了我 我选择了你 开始编织着爱的梦幻...
    如影泡幻阅读 273评论 0赞 4