react-native-page-scrollview

對ScrollView的封裝,可以很方便的實現水平,垂直分頁輪播效果.而且可以自定義分頁寬高,和側邊View的旋轉,透明度,大小等.

對於原生的ScrollView只支援水平的整屏的分頁,而且我看github上也沒有相應的元件.所以就自己封裝了一個.

安裝

npm install react-native-page-scrollview --save

如何使用

下面說明中的'元件'指的就是當前這個'react-native-page-scrollview'元件.

首先匯入元件

import PageScrollView from 'react-native-page-scrollview';

1.簡單的輪播(每頁圖片大小相同時)

這時你只需要給元件傳遞一個圖片的陣列和樣式即可.

let {width:w, height:h}=Dimensions.get('window');

let imgArr=[
    require('你圖片的路徑'),
    ...許多的圖片
];

在render方法中使用該元件.
style為整個輪播元件View的樣式,可以通過它來設定輪播的寬高

<PageListView 
    style={{width:w,height:w/16*9}}
    imageArr={imgArr}
/>

這時的效果為:

輪播的方向預設是水平的,如果要豎直方向的話只需要加一個屬性HorV="v"就可以了.

<PageScrollView
    style={{width:w,height:w/9*16}}
    HorV="v"
    imageArr={imgArr}
/>

圖片源可以是來自網路的

let imgArr=[
    {uri:'http://圖片的url'},
    ...許多的圖片
];

注意:這個時候如果圖片陣列imgArr是state的值,圖片的url也是從網路獲取的話,一開始this.state.imgArr可能為空,這時最好這樣使用:

{this.state.imgArr.length&&
    <PageScrollView
        ...
 
其他一些屬性
        imageArr={this.state.imgArr}
    />}

預設是無限輪播,自動輪播的,如果你不需要可以通過ifInfinite={false}屬性設定為不是無限輪播,通過ifAutoScroll={false}屬性設定為不是自動輪播.還有下面的那幾個點(當前圖片指示器)如果不想要的話用過ifShowPointerView={false}屬性取消.

style屬性是整個輪播元件View的樣式,這種情況下,輪播中的圖片大小是和style中的寬高相同的.如果需要單獨設定裡面每一張圖片的大小可以使用imageStyle屬性設定,imageStyle={{width:200,height:200/16*9}}

圖片可以支援點選,如果需要圖片點選,則加入屬性dealWithClickImage即可.

dealWithClickImage={
    (index)=>{
        點選圖片時需要執行的操作,index為當前點選到的圖片的索引
    }
}

2.簡單輪播-自定義View

輪播裡面除了可以放圖片還可以自定義View,這時需要給元件一下幾個屬性style,datas和view.

style:輪播的整體樣式

datas:輪播中所有自定義view要使用到的資料陣列,陣列中的每條資料則是對應自定義view中的每一條資料.

view:自定義view的具體渲染實現

<PageScrollView
    style={[整個輪播的樣式]}
    HorV="v"
    ifShowPointerView={false}
    datas={[下面的view中要用到的資料陣列]}
    view={(i,data)=>{
        return(
            <View style={[輪播中每個View的具體樣式]}>
                輪播中每個View的具體渲染內容,i為當前view的索引,data為當前view 的資料,相當於datas[i].
            </View>
        );
    }}
/>

這時的話就可以像這樣玩:

或者這麼玩:

上面是在做公司專案時用到的情況,其他的玩法就請大家自己發揮創造力吧.

3.高階輪播(當前圖片與旁邊圖片樣式不一樣時)

我寫了幾個內建的樣式供大家參考使用.這時只需要加入builtinStyle屬性就可以使用內建的樣式,可以使用builtinWH屬性指定內建樣式中圖片的寬高

<PageScrollView
    style={{width:w,height:w/16*9}}
    builtinStyle="需要的樣式"
    builtinWH={{width:300,height:300/16*9}}
    imageArr={imgArr}
/>

builtinStyle=”sizeChangeMode”時的效果:

豎直方向的效果:

builtinStyle=”rotateChangeMode”時的效果:

水平方向的效果:

可以通過currentPageChangeFunc屬性來設定在當前滾動到的頁面改變時執行的操作,需要傳入一個函式,函式引數為當前當前滾動到的頁面的索引currentPageChangeFunc={(currentPage)=>{this.setState({currentPage})}}

4.高階輪播-自定義View

如果你想要自定義自己喜歡的樣式,可以像下面這樣使用元件.其中sizeSmall為當滾動到旁邊時的大小為正常大小的多大,opacitySmall為滾動到旁邊時的透明度,rotateDeg為滾動到旁邊時旋轉的角度,skewDeg為滾動到旁邊時的圖片的傾斜角度.這幾個屬性可以按需給出自己需要的一個或多個.

<PageScrollView
    style={{width:w,height:w/16*9}}
    sizeSmall={0.5}
    opacitySmall:{0.6}
    rotateDeg:{30}
    skewDeg:{45}
    datas={[下面的view中要用到的資料陣列]}
    view={(i,data,{size,opacity,rotate,skew})=>{
        return(
                <View style={[輪播中每個View的具體樣式]}>
                    輪播中每個View的具體渲染內容,
                    i為當前view的索引,
                    data為當前view 的資料,相當於datas[i].{size,opacity,rotate,skew}中分別是當前view應該顯示的大小,透明度,旋轉角度,傾斜角度,和上面的四個屬性相對應,可以按需獲取其中的一個或多個.
                    根據這四個值來渲染view就能實現當前圖片與旁邊圖片不同樣式的高階輪播了.
                </View>
            );
    }}
/>

注意事項

imageArr和view屬性不能同時使用,view是自定義View時用的屬性,imageArr為圖片輪播時用的屬性,都給出的話會使用imageArr屬性,而view則無用,並且使用view屬性時需要給出datas屬性作為view的資料來源.

拓展,進階

goToNextPageSpeed可以指定手指滑動時可以滑動到下一頁的速度大小.速度大於多少時為有向左(右,上,下)翻一頁的意圖(數值越大,要滑動速度越快(越難)才能到下一頁,數值越小,滑動越慢(越容易)可以到下一頁),有點抽象,不知道我有沒有解釋清楚-_-||.

manualScrollToPage為使用者在指定的情況下可以手動讓元件滾動到相應view或圖片的方法.這時需要在元件中ref={(ps)=>{this.pageScrollView=ps;}}給出ref讓this.pageScrollView指向元件,然後this.pageScrollView.manualScrollToPage(4);滾動到索引為4的圖片或自定義View.

有的時候我們不想元件一開始顯示的是第一張圖片或View,這時可以通過didMount屬性(元件載入好後,並且佈局好得到相應寬高後的執行的操作)來讓元件載入好後滾動到相應索引的圖片或自定義View.didMount={()=>{this.pageScrollView.manualScrollToPage(4);}}

如果想要自定義下面的當前圖片指示器(下面的小點)也可以通過renderPointView屬性自定義.renderPointView={(selected)=>{return <View>你的渲染程式碼</View>}}這個渲染的是每一個小點,selected為布林值,表示當前指示器這個小點是否為選中狀態.

屬性一覽表:

如果大家覺得我的元件好用的話,幫到你的話,歡迎大家Star,Fork,如果有什麼問題的話也可以在github中想我提出,謝謝大家的支援.