React Native之 ScrollView介绍和使用

ScrollView组件介绍与简单使用

• React Native中的 ScrollView 的组件除了包装滚动平台，还集成了触摸锁定的 响应者 系统，使用的时候有几点需要注意
  • ScrollView 必须有一个确定的高度才能正常工作,对于 ScrollView 来说，它就是将一些不确定高度的子组件装进确定高度的容器
  • 初始化的2中方式
    • 不要给 ScrollView 中不要加 [flex:1]
    • 直接给该 ScrollView 设置高度（不建议），因为它会根据内部组件自动延伸自己的尺寸到合适的大小
  • ScrollView 内部的其它响应者没办法阻止 ScrollView 本身成为响应者（也就是说，ScrollView 响应的优先级比内部组件高，且内部组件没办法改变优先级）
• 那么就先来看看怎么创建基本的 ScrollView
  • 视图部分
    
    
    

  // 视图 var CustomScrollView = React.createClass({
          render(){ return(
                  <ScrollView style={styles.mainStyle}>
                      {this.renderItem()}
                  </ScrollView>
              );
          },
  
          renderItem() { // 数组 var itemAry = []; // 颜色数组 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>
                  );
              } 
          
  		
  
          		
  网友评论
       		
  				
  
  			
  			
  			
  		
  		
  		
      	
      	
          	
  
          		
  更多精彩分享
          		
  
          			
          		
          			
  	        		
  	        		学习是年轻人改变自己的最好方式