React Native之 ScrollView介紹和使用

ScrollView組件介紹與簡單使用

• React Native中的 ScrollView 的組件除了包裝滾動平臺，還集成了觸摸鎖定的 響應者 系統(tǒng)，使用的時候有幾點需要注意
  • ScrollView 必須有一個確定的高度才能正常工作,對于 ScrollView 來說，它就是將一些不確定高度的子組件裝進確定高度的容器
  • 初始化的2中方式
    • 不要給 ScrollView 中不要加 [flex:1]
    • 直接給該 ScrollView 設(shè)置高度（不建議），因為它會根據(jù)內(nèi)部組件自動延伸自己的尺寸到合適的大小
  • ScrollView 內(nèi)部的其它響應者沒辦法阻止 ScrollView 本身成為響應者（也就是說，ScrollView 響應的優(yōu)先級比內(nèi)部組件高，且內(nèi)部組件沒辦法改變優(yōu)先級）
• 那么就先來看看怎么創(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)友評論
       		
  				
  
  			
  			
  			
  		
  		
  		
      	
      	
          	
  
          		
  更多精彩分享
          		
  
          			
          		
          			
  	        		
  	        		學習是年輕人改變自己的最好方式