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

}, 
});
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容