React Native之ListView使用

前言

• 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)，沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí)

• 本人接觸 React Native 時間并不是特別長，所以對其中的內(nèi)容和性質(zhì)了解可能會有所偏差，在學(xué)習(xí)中如果有錯會及時修改內(nèi)容，也歡迎萬能的朋友們批評指出，謝謝

• 文章第一版出自簡書，如果出現(xiàn)圖片或頁面顯示問題，煩請轉(zhuǎn)至 簡書 查看 也希望喜歡的朋友可以點贊，謝謝

ListView組件介紹

---

• ListView組件是React Native中一個比較核心的組件，用途非常廣，設(shè)計初衷就是用來高效的展示垂直滾動的列表數(shù)據(jù)
• ListView 繼承了 ScrollView 的所有屬性
• 使用步驟：
  • 創(chuàng)建一個ListView.DataSource數(shù)據(jù)源，然后給它傳遞一個普通的數(shù)組數(shù)據(jù)
    
    
    

  getInitialState(){ // 初始化數(shù)據(jù)源(rowHasChanged是優(yōu)化的一種手段，只有當(dāng)r1 !== r2的時候才會重新渲染) var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); return{ // 給dataSource傳遞一組 數(shù)組 dataSource: ds.cloneWithRows(['內(nèi)容0', '內(nèi)容1', '內(nèi)容2', '內(nèi)容3', '內(nèi)容4', '內(nèi)容5'])
          }
      },

  • 使用數(shù)據(jù)源實例化一個ListView組件，定義一個renderRow回調(diào)函數(shù)，這個函數(shù)會接受數(shù)組中的每個數(shù)據(jù)作為參數(shù)，并返回一個可渲染的組件（也就是該列表的每一行Item）
    
    
    

  render() { return (
              <View style={styles.container}> // 根據(jù)數(shù)據(jù)源實例化一個ListView <ListView style={{backgroundColor:'yellow'}} // 獲取數(shù)據(jù)源 dataSource={this.state.dataSource} 
          
  		
  
          		
  網(wǎng)友評論
       		
  				
  
  			
  			
  			
  		
  		
  		
      	
      	
          	
  
          		
  更多精彩分享
          		
  
          			
          		
          			
  	        		
  	        		學(xué)習(xí)是年輕人改變自己的最好方式