React-Native之ListView的3种样式

728 查看

最近在学习React-Native的ListView组件，其实ListView 相当于iOS中的tableview，当然也可以通过改变布局来实现collectionView的样式，和分组的tableview样式，下面先看效果图。

ss.gif

1，基本ListView布局

第一种ListView布局应该是最简单了，没有分组，只要知道ListView的创建方法，和如何设置  
ListView的数据源就行了。

import React, { Component } from 'react';
import {    
    AppRegistry,    
    StyleSheet,    
    Text,    
    View,    
    ListView,    
  Image} from 'react-native';
var Dimensions = require('Dimensions');//获取屏幕的宽高
var ScreenWidth = Dimensions.get('window').width;
var ScreenHeight = Dimensions.get('window').height;
var FirstView = React.createClass({    
      getInitialState(){        
      var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});   
      return{            
          dataSource:ds.cloneWithRows(this.getRows({}))//初始化数据源    
      }  
  },    
//制作假数据    
  getRows(){        
        var dataArr = [];        
        for (var i = 0; i<100; i++){            
              dataArr.push({                    
                    title: 'Row' + i,                    
                    text:'Lorem ipsum dolor sit amet, ius ad pertinax oportere 
                    accommodare, an vix civibus corrumpit referrentur. Te nam case ludus 
                    inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale 
                    consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate
                   est, vel an accusam intellegam interesset. Nam eu stet pericula
                    reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui' + i
                        }            )        }       
           return dataArr;   
       },   
  render(){       
       return( 
//    创建ListView组件      
              <ListView              
                     dataSource={this.state.dataSource}//设置数据源               
                      renderRow={this.renderRow}//返回cell          
             />        )    }, 
//返回cell的方法   
  renderRow(rowData,sectionID,rowID,highlightRow){       
             return(            
                  <View  style={styles.rightViewStyle}>                
                        <Image style={styles.imageStyle}/>                
                        <View>                   
                             <Text style={styles.titleStyle}>{rowData.title}</Text> 
                             <Text style={styles.textStyle}>{rowData.text}</Text> 
                       </View>      
                  </View>        )    }})
//样式
  const styles = StyleSheet.create({    
          tabStyle:{        
              flex:1    
          },    
          rightViewStyle:{        
                flexDirection:'row',        
                borderBottomColor:'#CCCCCC',//cell的分割线       
                borderBottomWidth:1    
          },    
          imageStyle:{        
                      width:80,        
                      height:80,        
                      margin:20,        
                      backgroundColor:'red'    
          },    
           titleStyle:{        
                marginTop:20,        
                backgroundColor:'yellow'    
          },    
          textStyle:{        
                width:ScreenWidth-140,        
                backgroundColor:'green',        
                marginBottom:20    
        }});
module.exports = FirstView;

2，类似collectionView的布局

改变ListView的主轴方向，让ListView横向布局，然后设置换行显示，就能实现类似
collectionView的布局了
import React, { Component } from 'react';
import {    
    AppRegistry,    
    StyleSheet,    
    Text,    
    View,    
    ListView,    Image} from 'react-native';

var Dimensions = require('Dimensions');//获取屏幕的宽高
var ScreenWidth = Dimensions.get('window').width;
var ScreenHeight = Dimensions.get('window').height;

var SecondView = React.createClass({    
      getInitialState(){        
          //初始化数据源
          var ds = new  ListView.DataSource({rowHasChanged:(r1,r2) => r1 !== r2});
          return{            
               dataSource : ds.cloneWithRows(this.getRows({}))         
          }    
      },    
      //制作假数据 
      getRows(){        
            var Arr = [];        
            for(var i = 0; i<100; i++){           
                   Arr.push(
                       {                   
                         image: '111',                   
                         price:'222'                
                      }            )        
              }        
        return Arr;    
      },    
      render(){        
          return(            
                <ListView     //创建ListView           
                      dataSource={this.state.dataSource} //设置数据源               
                      renderRow={this.renderRow} //设置cell               
                      contentContainerStyle={styles.listViewStyle}//设置cell的样式
              />)    
        }, 
  //返回cell的方法   
    renderRow(rowData,sectionID,rowID,highlightRow){            
        return(                
            <View style={styles.bgStyle}>                    
                <Image style={styles.imageStyle}/>                    
                <Text style={{fontSize:20,marginBottom:0}}>{rowData.price}</Text>
            </View>            )    }})
//样式
const styles = StyleSheet.create({    
        listViewStyle:{        
              flexDirection:'row', //设置横向布局       
              flexWrap:'wrap'    //设置换行显示
        },    
        bgStyle:{        
              backgroundColor:'gray',        
              width:(ScreenWidth-30)/2, //cell的宽度        
              height:250,        
              marginLeft:10,        
              marginTop:10    
        },    
        imageStyle:{        
              width:(ScreenWidth-30)/2,       
              height:230,        
              backgroundColor:'red',        
              marginBottom:0,    
      }
});
module.exports = SecondView;

3,分组ListView的布局

5540CDF6-A572-4B35-A0DC-F827A31DBF59.png

因为是分组的ListView，显然设置数据源的方法就应该用cloneWithRowsAndSections

import React, { Component } from 'react';
import {    
    AppRegistry,    
    StyleSheet,    
    Text,    
    View,    
    ListView,    
    Image} from 'react-native';

如果不提供针对section标题和行数据提供自定义的提取方法，就会使用默认的方法，

98293E7A-C6BB-4D20-9E05-53BB2EE8A6C9.png

var ThirdView = React.createClass({    
      getInitialState(){        
          var getSectionData = (dataBlob,sectionID)=>{            
                return dataBlob[sectionID];        
          };        
          var getRowData = (dataBlob,sectionID,rowID) =>{            
                  return dataBlob[sectionID + ':' + rowID];        
          };
          因为这里我们需要返回区的数据，所以我们需要提供方法来提取行数据和section标题        
          return{            
              dataSource:new ListView.DataSource({                                     
              getSectionData:getSectionData,                
              getRowData:getRowData,                
              rowHasChanged:(r1,r2)=> r1 !==r2,                
              sectionHeaderHasChanged:(s1,s2)=> s1!== s2            })        }    
},

F2E6FFB0-D204-4F5E-8BB6-AB3C6BE0EBA9.png

//从上面的图片我们可以看出提取函数处理的数据的形式，其实就是个二维数组，
//制作假数据        
getLocaData(){
      var  Arr = {},            
      sectionIDs =[],//所有区ID的数组            
      rowIDs =[];//行ID数组
       //通过两次for循环创建假数据      
      for (var i = 0; i< 10; i++){           
           sectionIDs.push(i);            
           Arr[i] = 'section' + i;            
           rowIDs[i] = [];            
          for (var j= 0; j<5; j++){                
                rowIDs[i].push(j);                
                Arr[i +':' +j] = 'section' + i + '--row' + j;           
           }       
       } 
    //重新设置ListView的数据源，刷新表       
    this.setState({      
       dataSource:this.state.dataSource.cloneWithRowsAndSections(Arr,sectionIDs,rowIDs)            
  })    
},    
render(){        
      return(            
            <ListView//创建表，并设置返回section和cell的方法                
                    dataSource={this.state.dataSource}                
                    renderRow={this.renderRow}                
                    renderSectionHeader={this.renderSectionHeader}                                
                    contentContainerStyle={styles.listViewStyle}            />        )    
},    
//这个方法相当于iOS的viewDidload方法，通常用于网络请求，返回数据之后重新刷新表,这里让它调用制作假数据的方法，然后刷新表    
componentDidMount(){         
    this.getLocaData();    
},  
//返回cell的方法  
renderRow(rowData,sectionID,rowID,highlighRow){        
      return(            
              <View style={styles.cellStyle}>                
                  <Image style={styles.imageStyle}/>                
                  <Text>{rowData}</Text>            
              </View>        )    
}, 
//返回section的方法  
renderSectionHeader(sectionData,sectionID){        
      return(            
            <View style={styles.sectionStyle}>                
                <Text>{sectionData}</Text>            
           </View>        )    },})
//样式
const styles = StyleSheet.create({    
          sectionStyle:{        
                backgroundColor:'gray',        
                height:25    
          },    
        cellStyle:{        
              flexDirection:'row', //设置横向布局       
              borderBottomColor:'#CCCCCC',        
              borderBottomWidth:1,        
              alignItems:'center'//交叉轴的对齐方式    
         },    
        imageStyle:{        
              width:70,        
              height:70,        
              backgroundColor:'red',        
              margin:20    
        },
});
module.exports = ThirdView;

最后的样子就是下面的图片，主要要理解ListView的数据源的结构，通过构造假数据可以更好的理解如何给ListView设置数据源

2FA7116E-088F-4A51-9F1B-0AF3CDCF5FC4.png