ReactNative實(shí)現(xiàn)分區(qū)瀑布流

效果如圖

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

代碼與邏輯實(shí)現(xiàn),注釋掉的部分是實(shí)現(xiàn)不分區(qū)的瀑布流

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}>副標(biāo)題</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',

}, 
});
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,094評(píng)論 25贊 709
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 136,578評(píng)論 19贊 139
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,405評(píng)論 4贊 61
  • 喂書長(zhǎng)大的孩子注定與眾不同，腹有詩(shī)書氣自華，腹有詩(shī)書行天下！ 閱讀的效果從來(lái)都不是立竿見影的，然而它卻能一點(diǎn)一滴地...
    陽(yáng)光所指閱讀 313評(píng)論 0贊 1
  • 文/山雨 還是那座城 那座樓 那個(gè)房間 從春天走到現(xiàn)在 從陌路走到一起 你選擇了我 我選擇了你 開始編織著愛的夢(mèng)幻...
    如影泡幻閱讀 307評(píng)論 0贊 4

友情鏈接更多精彩內(nèi)容