Development practice of Rn--imitation Ctrip app (ii) _react-native

The article finally attaches the source address

On a blog Link rn Development Practice-Imitation Ctrip app (i) to achieve the first page of the carousel map

Swiper Introduction

The best swiper component for react Native. Swiper is currently a widely used mobile end Web touch content sliding JS plugin.

Swiper:github Address

1. Basic properties: Prop Default Type Description Horizontal true bool If the value is true, the scrolling content is arranged horizontally, not vertically in the column. Loop true bool If set to false, sliding to the last one will not show the first picture. Index 0 number initially enters the page identified as 0 of the page. Showsbuttons false BOOL If set to True, you can make the control button (that is, the left and right sides of the arrow) visible. AutoPlay false bool is set to true, the page can be automatically jumped.

2. Page Number Property Prop default Type Description showspagination true bool default is true, display a dot below the page to indicate the current page is in the first few. Paginationstyle {...} style sets the style of the origin of the page, and the custom style is merged with the default style. Renderpagination dot ... element can customize the style that is not the current dot Activedot ... element can customize the current

3. AutoPlay Properties Prop default Type Description AutoPlay true bool is set to true to make the page slide automatically. Autoplaytimeout 2.5 Number sets the time for each page to automatically slide stay autoplaydirection true bool dot direction allows default control to introduce Swiper third Party library

Go to the root of the project to execute the following instruction:

NPM i react-native-swiper--save  
//Recommended installation 1.5.5 version is more stable: npm I react-native-swiper@1.5.5--save

Perform multiple times if the error is not correct

Using the Swiper Library, customize the banner Carousel component to create a new banner component

Encapsulates one of its own Carousel component banner, which will use Swiper in this control.

Using the banner component

Use the banner component that you just created in homepage to take a place beforehand, and the effect is implemented one step at a later stage.

Execution effect:

Pass data preparation data to banner

Here, in the app folder, create a data folder that holds some analog data and creates a Homebean JSON data file. For home data loading.

Import data

Introducing Homebean This JSON data file into the homepage component

Import Data
var homebean=require ('.. /.. /date/homebean.json ');

Passing data to the banner component

Gets the Banners collection (Carousel graph data) in the Homebean data and passes it to the banner component through a property banners defined in the banner component.

{/* Advertising Carousel Map * *}
<banner banners={homebean.banners}></banner>

Banner component receives data

Back to the banner component, get the property value (This.props.banners) to receive the carousel graph data passed over.

Receive data
var banners=this.props.banners;

Introduction of Swiper Third Party library

The banner component obtains the data, introduces the Swiper, and starts using Swiper to implement the carousel graph

A simple layout

In Swiper simple Create two view components (each component corresponds to a carousel map), preview look at the effect, swiper default will generate indicators.

Add each Carousel ad map

Traversing the banners carousel graph data passed over,
Add each carousel ad map.

Gets the width of the screen, according to the effect chart, the width of each carousel

Get the wide
var {width} =dimensions.get (' window ') of the phone screen;

To modify the color of a carousel chart indicator

By understanding the properties of the Swiper component, change the dot and Activedot to modify the carousel indicator check and the selected style, where dot and activedot need to pass a view component and give the view set style styles.

To modify the position of a Carousel chart indicator

By setting the Swiper property Paginationstyle to modify the indicator position of the carousel graph, the bottom is achieved through absolute positioning.

Circular scrolling and automatic scrolling

Open the Carousel diagram loop and automatic scrolling by setting the Swiper properties loop and AutoPlay.

The final Carousel diagram achieves the following results:

Last attached project address