Reactnative Learning-swipe to view pictures third-party components React-native-swiper

Swipe to view pictures third-party components: React-native-swiper, the current version is: 1.4.3, this version does not support Android.

The following is a description of some of the use of the component, may summarize the incomplete, I hope we all together to improve.

Official Document: Https://github.com/leecade/react-native-swiper

：

Installation

NPM Install--save React-native-swiper

Basic usage

import React, {AppRegistry,Component,StyleSheet,Text,View} from ‘react-native‘; import Swiper from ‘react-native-swiper‘;   class swiper extends Component { render() { return ( <Swiper style={styles.wrapper}  showsButtons={true}  index={1}  loop={false} > <View style={styles.slide1}> <Text style={styles.text}>Hello Swiper</Text> </View> <View style={styles.slide2}> <Text style={styles.text}>Beautiful</Text> </View> <View style={styles.slide3}> <Text style={styles.text}>And simple</Text> </View> </Swiper> ) ｝ ｝   var styles = StyleSheet.create({ wrapper: { }, slide1: { flex: 1, justifyContent: ‘center‘, alignItems: ‘center‘, backgroundColor: ‘#9DD6EB‘, }, slide2: { flex: 1, justifyContent: ‘center‘, alignItems: ‘center‘, backgroundColor: ‘#97CAE5‘, }, slide3: { flex: 1, justifyContent: ‘center‘, alignItems: ‘center‘, backgroundColor: ‘#92BBD9‘, }, text: { color: ‘#fff‘, fontSize: 30, fontWeight: ‘bold‘, } })   AppRegistry.registerComponent(‘swiper‘, () => swiper)

This component can be applied to a variety of carousel diagrams, and the component's built-in settings are quite comprehensive (in addition to the current version is not compatible with Android), and the usage is not complicated.

• The Index property is used in the component to identify the current page, and when the page is sliding, the index is bound to change, and we want to be able to get its index value when the page is sliding, using onmomentumscrollend={(E, state, context =>{this.currentindex=state.index}}, the Currentindex in the function is the index of the current page.
• This version of the test, if the loop is set to True,showsbuttons setting is also true, there will be sliding sometimes abnormal situation, so I set the loop to false to solve the problem.

Property

Here is just a subset of the frequently used property settings, there are many callback functions of the use of methods, I am not particularly familiar with, so still do not mislead everyone,. You can have a detailed online understanding.

1.Basic

Prop	Default	Type	Description
Horizontal	True	bool	If the value is true, the scrolled content is arranged horizontally instead of perpendicular to the column.
Loop	True	bool	If set to false, swiping again will not show the first picture when you swipe to the last one.
Index	0	Number	The initial Entry page is identified as a 0 page.
Showsbuttons	False	bool	If set to True, you can make the control buttons (that is, the arrows on the left and right sides) visible.
AutoPlay	False	bool	Set to True, the page can jump automatically.

2.Custom Basic Style & content

Prop	Default	Type	Description
Width	-	Number	If you do not have a special setting, go through flex:1 by default to full screen.
Height	-	Number	If you do not have a special setting, go through flex:1 by default to full screen.
Style	{...}	Style	Sets the style of the page.

3.Pagination

Prop	Default	Type	Description
Showspagination	True	bool	The default value is true to display a dot at the bottom of the page to indicate the current page is located in the first few.
Paginationstyle	{...}	Style	Sets the style of the page origin, and the custom style is merged with the default style.
Renderpagination
Dot	<view style={{backgroundcolor: ' Rgba (0,0,0,.2) ', Width:8, Height:8,borderradius:4, Marginleft:3, Marginright:3, MA Rgintop:3, Marginbottom:3,}}/>	Element	You can customize styles that are not the current dot
Activedot	<view style={{backgroundcolor: ' #007aff ', Width:8, Height:8, Borderradius:4, Marginleft:3, Marginright:3, MarginTo P:3, Marginbottom:3,}}/>	Element	You can customize the style of the current page dot

4.Autoplay

Prop	Default	Type	Description
AutoPlay	True	bool	Set to True to make the page slide automatically.
Autoplaytimeout	2.5	number	Set the time that each page automatically slides to stay
Autoplaydirection	True	bool	The direction of the dots allows the default self-control

5.Control buttons

Prop	Default	Type	Description
Showsbuttons	True	bool	Whether to display the control arrow button
Buttonwrapperstyle	{position: ' absolute ', paddinghorizontal:15, paddingvertical:30, top:70, left:0, Alignitems: ' Flex-start '}	style	Defines the style of the default arrow button
Nextbutton	<text style={{fontsize:60, color: ' #00a7ec ', paddingtop:30, paddingbottom:30}}>‹</text>	element	Custom Right arrow button style
Prevbutton	<text style={{fontsize:60, color: ' #00a7ec ', paddingtop:30, paddingbottom:30}}>›</text>	element	Custom left arrow button style

Reactnative Learning-swipe to view pictures third-party components React-native-swiper