React Native之 ScrollView介紹和使用

ScrollView組件介紹與簡(jiǎn)單使用

• React Native中的 ScrollView 的組件除了包裝滾動(dòng)平臺(tái)，還集成了觸摸鎖定的 響應(yīng)者 系統(tǒng)，使用的時(shí)候有幾點(diǎn)需要注意
  • ScrollView 必須有一個(gè)確定的高度才能正常工作,對(duì)于 ScrollView 來(lái)說(shuō)，它就是將一些不確定高度的子組件裝進(jìn)確定高度的容器
  • 初始化的2中方式
    • 不要給 ScrollView 中不要加 [flex:1]
    • 直接給該 ScrollView 設(shè)置高度（不建議），因?yàn)樗鼤?huì)根據(jù)內(nèi)部組件自動(dòng)延伸自己的尺寸到合適的大小
  • ScrollView 內(nèi)部的其它響應(yīng)者沒辦法阻止 ScrollView 本身成為響應(yīng)者（也就是說(shuō)，ScrollView 響應(yīng)的優(yōu)先級(jí)比內(nèi)部組件高，且內(nèi)部組件沒辦法改變優(yōu)先級(jí)）
• 那么就先來(lái)看看怎么創(chuàng)建基本的 ScrollView
  • 視圖部分
    
    
    

  // 視圖 var CustomScrollView = React.createClass({
          render(){ return(
                  <ScrollView style={styles.mainStyle}>
                      {this.renderItem()}
                  </ScrollView>
              );
          },
  
          renderItem() { // 數(shù)組 var itemAry = []; // 顏色數(shù)組 var colorAry = ['gray', 'green', 'blue', 'yellow', 'black', 'orange']; // 遍歷 for (var i = 0; i<colorAry.length; i++) {
                  itemAry.push(
                      <View key={i} style={[styles.itemStyle, {backgroundColor: colorAry[i]}]}></View>
                  );
              } 
          
  		
  
          		
  網(wǎng)友評(píng)論
       		
  				
  
  			
  			
  			
  		
  		
  		
      	
      	
          	
  
          		
  更多精彩分享
          		
  
          			
          		
          			
  	        		
  	        		學(xué)習(xí)是年輕人改變自己的最好方式