ReactNative实现分区瀑布流

作者: lovelytitantian | 来源:发表于2017-07-06 14:50 被阅读971次

ReactNative实现分区瀑布流
自定义collocationViewLayout实现瀑布流
瀑布流布局的学习
swift实现瀑布流
「实战」蘑菇街 PC 端首页，瀑布流布局的实现原理与细节技巧
Feed流与瀑布流
iOS瀑布流
Swift实现UICollectionView支持多 secti
eyoucms arcpagelist 瀑布流分页列表
RecyclerView瀑布流优化方案探讨

效果如图

屏幕快照 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',

}, 
});

ReactNative实现分区瀑布流
效果如图代码与逻辑实现,注释掉的部分是实现不分区的瀑布流
自定义collocationViewLayout实现瀑布流
实现瀑布流简单，实现分区瀑布流，并且每个区的瀑布流的列数不一样且有区头和区尾，就不是太容易了。我嫌麻烦不愿意自己写...
瀑布流布局的学习
1- 实现瀑布流布局效果瀑布流效果瀑布流代码木桶布局效果木桶布局代码瀑布流布局 2- 实现一个新闻瀑布流新闻...
swift实现瀑布流
类似瀑布流的使用场景很多. 实现瀑布流的关键节点: 实现cell的高度不同且没有规则的展示这里整理实现瀑布流思路...
「实战」蘑菇街 PC 端首页，瀑布流布局的实现原理与细节技巧
零、介绍这篇文章主要是介绍网站页面瀑布流布局的实现，主要包括：瀑布流是什么瀑布流的实现原理瀑布流的使用场景...
Feed流与瀑布流
我们每天在刷着大量信息，大量图片，可以说Feed流与瀑布流无处不在。今天我们就来区分区分Feed流与瀑布流吧。 F...
iOS瀑布流
瀑布流Demo 使用UICollectionView实现瀑布流自定义UICollectionViewLayout...
Swift实现UICollectionView支持多 secti
通过UICollectionViewLayout实现瀑布流代码如下调用如下完整demo链接瀑布流
eyoucms arcpagelist 瀑布流分页列表
arcpagelist 瀑布流分页列表(配合arclist标签可实现ajax瀑布流分页) ...
RecyclerView瀑布流优化方案探讨
目录介绍 01.规则瀑布流实现 02.不规则瀑布流实现2.1 实现方式2.2 遇到问题 03.瀑布流上拉加载 04...