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

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

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

   import React,{Component} from 'react';
   import {
       View,
       Text,
       StyleSheet,
       ScrollScrollView,
       ScrollView,
       Dimensions
   } from 'react-native';
   
   //自定义组件类
   export default class CKScrollView extends Component{
       constructor(){
           super();
       }
   
       render(){
           return(
               <View>
                   <ScrollView
                       pagingEnabled={true}//是否分页，默认不分页，水平滑动时候会一下跳动很多页过去，加上true则一页一页滚动
   22                     horizontal={true}//水平滚动开启
   23                     showsHorizontalScrollIndicator={false}//是否显示滚动条
   24                     //scrollEnabled={false}//是否允许滚动
                   >
                       {this._randerItem()}
                   </ScrollView>
               </View>
           )
       }
       _randerItem(){
           //1.颜色数组
           let colorArr=['red','green','blue','yellow','purple'];
           //2.组件数组
           let itemArr=[];
           //3.遍历
           for(let i=0;i<colorArr.length;i++){
               itemArr.push(
                   <View
                       style={{
                           width:Dimensions.get('window').width,
                           height:300,
                           backgroundColor:colorArr[i]
                       }}
                       key={i}
                   >
                       <Text>{i}</Text>
                   </View>
               )
           }
           //4.返回数组组件
           return itemArr;
       }
   
   
   
   }
   
   // 样式
   const styles=StyleSheet.create({
   
   });

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

2. 结果如图

3.