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

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

自定义水平的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 });