@miot-plugin/react-native-page-control NPM

react-native-page-control

Page Control for React Native, like iOS UIPageControl, APIs are same as UIPageControl

Installation

$ npm install react-native-page-control --save

Demo

page control demo

Example

import PageControl from 'react-native-page-control';

<PageControl
  style={{position:'absolute', left:0, right:0, bottom:10}}
  numberOfPages={3}
  currentPage={1}
  hidesForSinglePage
  pageIndicatorTintColor='gray'
  currentPageIndicatorTintColor='white'
  indicatorStyle={{borderRadius: 5}}
  currentIndicatorStyle={{borderRadius: 5}}
  indicatorSize={{width:8, height:8}}
  onPageIndicatorPress={this.onItemTap}
/>

API (props)

Prop	Required	Default	Type	Description
numberOfPages	YES	`0`	`number`	The number of pages the receiver shows (as dots)
currentPage	NO	`0`	`number`	The current page, shown by the receiver as a white dot
hidesForSinglePage	NO	`false`	`bool`	A Boolean value that controls whether the page control is hidden when there is only one page
pageIndicatorTintColor	NO	`gray`	`string`	The tint color to be used for the page indicator.
currentPageIndicatorTintColor	NO	`white`	`string`	The tint color to be used for the current page indicator.
indicatorStyle	NO	`{}`	`object`	style for the page indicator
currentIndicatorStyle	NO	`{}`	`object`	style for the current page indicator.
onPageIndicatorPress	NO	function(index){}	`func`	page indicator press hook function. `param: index` current press indicator index

Development

$ yarn
$ npm run init
$ npm run start
$ react-native run-ios

react react-native react-component page-control PageControl UIPageControl

create-react-class prop-types

1.1.1

4 years ago