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.