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

標籤：數值   一個   自訂分頁   null   speed   透明度   end   時間長度   uil   

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為布爾值,表示當前指標這個小點是否為選中狀態.

屬性一覽表:

props	作用	預設值
builtinStyle	使用官方提供的哪一個內建樣式	null
builtinWH	使用內建樣式時使用者自訂的圖片寬高	{}
style	設定整個組件View的style樣式	{}
imageArr	輪播圖片的數組(該數組存在時使用該數組,datas數組失效)	[]
imageStyle	如果是傳入圖片數組時,自訂的圖片樣式(該屬性在自訂View時無用)	null
datas	自訂view中對應的資料數組	[]
view	每一個自訂View的具體渲染	()=>{}
goToNextPageSpeed	速度大於多少時為有向左(右,上,下)翻一頁的意圖(數值越大,要滑動速度越快(越難)才能到下一頁,數值越小,滑動越慢(越容易)可以到下一頁,)	3
ifInfinite	是否無限輪播(無限滾動)	true
ifAutoScroll	是否自動輪播	true
infiniteInterval	自動輪播每張切換的時間長度(毫秒)	2000
resizeMode	圖片的顯示形式	‘cover‘
dealWithClickImage	點擊圖片時執行的操作(不是自訂View的時候)	null
currentPageChangeFunc	在當前滾動到的頁面改變時調用的方法	null
scrollEnabled	是否允許使用者手動滾動ScrollView	true
didMount	組件載入好後,並且布局好得到相應寬高後的執行的操作	null
ifShowPointerView	是否顯示當前圖片指標View(下面的點)	true
pointerColor	指標的的相關顏色.分別為:當前頁的顏色,其他頁的顏色,邊框的顏色	[‘#fff‘,‘#0000‘,‘#fff‘]
pointerViewStyle	自訂指標View的樣式(絕對位置的top,bottom...)	null
pointerStyle	自訂指標圓點的樣式(圓點大小)	null
sizeSmall	自訂View時滾動到旁邊時的大小為正常大小的多大	null
opacitySmall	自訂View時滾動到旁邊時的透明度	null
rotateDeg	自訂View時滾動到旁邊時旋轉的角度	null
skewDeg	自訂View時滾動到旁邊時的圖片的傾斜角度	null

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

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