react-native-page-scrollview 的使用方法(實現酷炫的分頁輪播效果)

react-native-page-scrollview

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

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

github地址: https://github.com/geek-prince/react-native-page-scrollview

npm地址: https://www.npmjs.com/package/react-native-page-scrollview

安裝

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中想我提出,謝謝大家的支持.