How to use React-native-page-scrollview (for a cool paging effect)

React-native-page-scrollview

For the ScrollView package, it is easy to achieve horizontal, vertical paging effect. And you can customize the page width height, and side view rotation, transparency, size and so on.

The native ScrollView only supports horizontal full screen paging, and I don't see a corresponding component on GitHub. So I encapsulated a.

GitHub Address: Https://github.com/geek-prince/react-native-page-scrollview

NPM Address: Https://www.npmjs.com/package/react-native-page-scrollview

Installation

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

How to use

下面说明中的‘组件‘指的就是当前这个‘react-native-page-scrollview‘组件.

Import Components First

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

1. Simple Carousel (when each page has the same size)

You just need to pass an array of pictures and a style to the component.

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

let imgArr=[    require(‘你图片的路径‘),    ...许多的图片];

The component is used in the Render method.
styleFor the entire Carousel component view style, it can be used to set the width and height of the carousel

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

The effect at this point is:

The direction of the carousel is horizontal by default, and if you want it to be vertical, you just need to add a property HorV="v" .

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

The image source can be from the network

let imgArr=[    {uri:‘http://图片的url‘},    ...许多的图片];

注意:这个时候如果图片数组imgArr是state的值,图片的url也是从网络获取的话,一开始this.state.imgArr可能为空,这时最好这样使用:

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

The default is infinite Carousel, auto-Carousel, if you do not need to set the property to ifInfinite={false} not infinite carousel, through the ifAutoScroll={false} property set to not auto-carousel. There are several points below (the current picture indicator) If you do not want to use the ifShowPointerView={false} property to cancel.

styleproperty is the style of the entire Carousel component view, in which case the picture size in the carousel is the same as the width height in the style. If you need to set the size of each picture individually, you can use the imageStyle property settingsimageStyle={{width:200,height:200/16*9}}

The image can be clicked, and if you need a picture click, add the attribute dealWithClickImage .

dealWithClickImage={    (index)=>{        点击图片时需要执行的操作,index为当前点击到的图片的索引    }}

2. Simple Carousel-Custom View

In addition to the carousel can be placed in the picture can also be customized view, then you need to give the component a few properties style , datas and view .

style: The overall style of the carousel

datas: The array of data to be used by all custom view in the carousel, each of the data in the array is the one that corresponds to the custom view.

view: Custom view-Specific rendering implementations

<PageScrollView    style={[整个轮播的样式]}    HorV="v"    ifShowPointerView={false}    datas={[下面的view中要用到的数据数组]}    view={(i,data)=>{        return(            <View style={[轮播中每个View的具体样式]}>                轮播中每个View的具体渲染内容,i为当前view的索引,data为当前view 的数据,相当于datas[i].            </View>        );    }}/>

At this point, you can play like this:

Or play it like this:

The above is in the company projects used in the situation, the other play will please everyone to play their own creativity it.

3. Advanced Carousel (when the current picture is not the same as the next picture style)

I have written several built-in styles for your reference. You can use the built-in style only if you want to add builtinStyle attributes, and you can use attributes to specify the width of the picture in the builtinWH built-in style

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

builtinstyle= "Sizechangemode" effect:

Effect in vertical direction:

builtinstyle= "Rotatechangemode" effect:

Horizontal direction Effect:

Properties can be used to set the action to be currentPageChangeFunc performed when the page is currently scrolled to a change, requiring a function to be passed to the index of the currently scrolled page.currentPageChangeFunc={(currentPage)=>{this.setState({currentPage})}}

4. Advanced Carousel-Custom View

If you want to customize your favorite style, you can use components like this one. Which sizeSmall is the size of normal size when scrolling to the side, the transparency when scrolling to the side, the opacitySmall angle of rotateDeg rotation when scrolling to the side, skewDeg The tilt angle of the picture to scroll to the side. These properties can give one or more of their own needs as needed.

<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>            );    }}/>

# #注意事项

imageArrand view properties cannot be used at the same time, view is a custom view when the property used, imageArr for the picture when the rotation of the property, given the words will use the imageArr property, and view is useless, and the use view of attributes need to give the datas property as view the data source .

Expansion, advanced

goToNextPageSpeedYou can specify the speed at which the finger slides to slide to the next page. The speed is greater than how much when there is a left (right, up, down) the intention to turn a page (the larger the value, the faster the sliding speed (the more difficult) to the next page, the smaller the value, the slower the slide (the easier) can go to the next page), a little abstract, I do not know whether I have explained _-||.

manualScrollToPageA method that allows a user to manually scroll a component to the corresponding view or picture in the specified case. You need to give ref in the component to ref={(ps)=>{this.pageScrollView=ps;}} let This.pagescrollview point to the component, and then this.pageScrollView.manualScrollToPage(4); scroll to the image with index 4 or custom view.

Sometimes we don't want the component to initially display the first image or view, which can be didMount scrolled to a picture or custom view of the corresponding index after the component has been loaded and the component has been loaded and the operation is done after it has been well-arranged to have the appropriate width.didMount={()=>{this.pageScrollView.manualScrollToPage(4);}}

If you want to customize the following current picture indicator (the dot below), you can also customize it by using renderPointView properties. renderPointView={(selected)=>{return <View>你的渲染代码</View>}} This renders each dot as a selected Boolean value, indicating whether the current indicator is a selected point.

List of properties:

Props	function	Default Value
Builtinstyle	Use a built-in style that's officially available	Null
Builtinwh	User-defined picture width height when using built-in styles	{}
Style	Set the style style for the entire component view	{}
Imagearr	An array of carousel images (the array exists when the array is used, the datas array is invalidated)	[]
Imagestyle	If you are passing in an array of pictures, customize the picture style (this property is useless when customizing view)	Null
Datas	The corresponding data array in the custom view	[]
View	Specific rendering for each custom view	() =>{}
Gotonextpagespeed	The speed is greater than how much when there is a left (right, up, down) the intention to turn one page (the larger the value, the faster the sliding speed (the more difficult) to the next page, the smaller the value, the slower the slide (the easier) can go to the next page,)	3
Ifinfinite	Whether infinite rotation (infinite scrolling)	True
Ifautoscroll	Whether automatic carousel	True
Infiniteinterval	Auto-carousel Duration (milliseconds) per switch	2000
ResizeMode	The display form of the picture	' Cover '
Dealwithclickimage	What to do when you click a picture (not a custom view)	Null
Currentpagechangefunc	The method that is called when the page that is currently scrolled to changes	Null
Scrollenabled	Whether to allow users to scroll scrollview manually	True
Didmount	After the component has been loaded, and the layout is good, the operation is performed after the corresponding width is high.	Null
Ifshowpointerview	Whether to display the current picture indicator view (dot below)	True
PointerColor	The associated color of the indicator: the color of the current page, the color of the other page, the color of the border	[' #fff ', ' #0000 ', ' #fff ']
Pointerviewstyle	Customize the style of the indicator view (absolutely positioned top,bottom ...)	Null
Pointerstyle	Customize the style of indicator dots (dot size)	Null
Sizesmall	How large is the normal size when you scroll to the side when customizing view	Null
Opacitysmall	Transparency when you scroll to the side of a custom view	Null
Rotatedeg	Angle of rotation when you scroll to the side when customizing view	Null
Skewdeg	Tilt angle of the picture when you scroll to the side when customizing view	Null

If you think my component is easy to use, help you, welcome everyone star,fork, if there is any problem can also in GitHub think I put forward, thank you for your support.

How to use React-native-page-scrollview (for a cool paging effect)