react native 自定义ScrollView组件（水平滑动）

标签：one   rom   颜色   code   create   ret   滚动   als   image   

ScrollView组件常用于轮播图或引导页，那么水平滚动则比较常用

1. 自定义水平的CKScrollView.js组件类

    1 import React,{Component} from ‘react‘;
    2 import {
    3     View,
    4     Text,
    5     StyleSheet,
    6     ScrollScrollView,
    7     ScrollView,
    8     Dimensions
    9 } from ‘react-native‘;
   10 
   11 //自定义组件类
   12 export default class CKScrollView extends Component{
   13     constructor(){
   14         super();
   15     }
   16 
   17     render(){
   18         return(
   19             <View>
   20                 <ScrollView
   21                     pagingEnabled={true}//是否分页，默认不分页，水平滑动时候会一下跳动很多页过去，加上true则一页一页滚动
   22                     horizontal={true}//水平滚动开启
   23                     showsHorizontalScrollIndicator={false}//是否显示滚动条
   24                     //scrollEnabled={false}//是否允许滚动
   25                 >
   26                     {this._randerItem()}
   27                 </ScrollView>
   28             </View>
   29         )
   30     }
   31     _randerItem(){
   32         //1.颜色数组
   33         let colorArr=[‘red‘,‘green‘,‘blue‘,‘yellow‘,‘purple‘];
   34         //2.组件数组
   35         let itemArr=[];
   36         //3.遍历
   37         for(let i=0;i<colorArr.length;i++){
   38             itemArr.push(
   39                 <View
   40                     style={{
   41                         width:Dimensions.get(‘window‘).width,
   42                         height:300,
   43                         backgroundColor:colorArr[i]
   44                     }}
   45                     key={i}
   46                 >
   47                     <Text>{i}</Text>
   48                 </View>
   49             )
   50         }
   51         //4.返回数组组件
   52         return itemArr;
   53     }
   54
   55
   56 
   57 }
   58 
   59 // 样式
   60 const styles=StyleSheet.create({
   61 
   62 });

   以上红色部分为水平设置。

2. 结果如图

3. 

    

    

react native 自定义ScrollView组件（水平滑动）

标签：one   rom   颜色   code   create   ret   滚动   als   image   

原文地址：https://www.cnblogs.com/ckfuture/p/14257688.html