Skip to content

Commit 2ea3293

Browse files
proptigeratarproptigeratar
committed
first
1 parent 5a594cd commit 2ea3293

22 files changed

+1112
-1
lines changed

‎.gitignore

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
project.xcworkspace
24+
25+
# Android/IJ
26+
#
27+
.idea
28+
.gradle
29+
local.properties
30+
31+
# node.js
32+
#
33+
node_modules/
34+
npm-debug.log
35+
36+
rn-viewpager-*
37+
.tmp

‎.npmignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
RNViewPagerDemo/
2+
imgs/
3+
pub2demo.sh
4+
.npmignore
5+
.gitignore

‎README.md

100644100755
Lines changed: 139 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,139 @@
1-
# react-native-viewpager
1+
# React-Native-ViewPager
2+
[![npm](https://img.shields.io/npm/v/rn-viewpager.svg?style=plastic)](https://npmjs.org/package/rn-viewpager) [![npm](https://img.shields.io/npm/dm/rn-viewpager.svg?style=plastic)](https://npmjs.org/package/rn-viewpager) [![npm](https://img.shields.io/npm/dt/rn-viewpager.svg?style=plastic)](https://npmjs.org/package/rn-viewpager)
3+
4+
ViewPager and Indicator component for react-native on both android and ios. ViewPager's props is the same as [ViewPagerAndroid](https://facebook.github.io/react-native/docs/viewpagerandroid.html#content).
5+
6+
<p>
7+
<img src="./imgs/ad.png" width="1024">
8+
</p>
9+
10+
## Features
11+
- unify \<ViewPagerAndroid\> and \<ScrollView pagingEnabled={true}\> to \<ViewPager\>, add offer same props as [ViewPagerAndroid](https://facebook.github.io/react-native/docs/viewpagerandroid.html#content).
12+
- \<IndicatorViewPager\> component support render indicator
13+
- implement common indicator: DotIndicator, TitleIndicator and TabIndicator
14+
15+
16+
## Preview
17+
[download demo apk file](http://fir.im/md2u)
18+
<p>
19+
<img src="./imgs/dotIndicator.gif" width="256" />
20+
<img src="./imgs/titleIndicator.gif" width="256" />
21+
<img src="./imgs/tabIndicator.gif" width="256" />
22+
</p>
23+
24+
## Build and run the demo
25+
26+
```
27+
cd RNViewPagerDemo/
28+
npm install
29+
react-native run-ios
30+
```
31+
32+
## Component API
33+
34+
[`<ViewPager />` Component API](docs/viewpager.md)
35+
36+
[`<IndicatorViewPager />` Component API](docs/indicatorviewpager.md)
37+
38+
[`<PagerDotIndicator />` Component API](docs/dotindicator.md)
39+
40+
[`<PagerTabIndicator />` Component API](docs/tabindicator.md)
41+
42+
[`<PagerTitleIndicator />` Component API](docs/titleindicator.md)
43+
44+
## Usage
45+
46+
### Install from npm:
47+
`npm install --save rn-viewpager`
48+
49+
### Integrate into your app:
50+
51+
```jsx
52+
53+
import {StyleSheet, View, Text} from 'react-native';
54+
import React, {Component} from 'react';
55+
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';
56+
57+
export default class ViewPagerPage extends Component {
58+
render() {
59+
return (
60+
<View style={{flex:1}}>
61+
<IndicatorViewPager
62+
style={{height:200}}
63+
indicator={this._renderDotIndicator()}
64+
>
65+
<View style={{backgroundColor:'cadetblue'}}>
66+
<Text>page one</Text>
67+
</View>
68+
<View style={{backgroundColor:'cornflowerblue'}}>
69+
<Text>page two</Text>
70+
</View>
71+
<View style={{backgroundColor:'#1AA094'}}>
72+
<Text>page three</Text>
73+
</View>
74+
</IndicatorViewPager>
75+
76+
<IndicatorViewPager
77+
style={{flex:1, paddingTop:20, backgroundColor:'white'}}
78+
indicator={this._renderTitleIndicator()}
79+
>
80+
<View style={{backgroundColor:'cadetblue'}}>
81+
<Text>page one</Text>
82+
</View>
83+
<View style={{backgroundColor:'cornflowerblue'}}>
84+
<Text>page two</Text>
85+
</View>
86+
<View style={{backgroundColor:'#1AA094'}}>
87+
<Text>page three</Text>
88+
</View>
89+
</IndicatorViewPager>
90+
91+
<IndicatorViewPager
92+
style={{flex:1, paddingTop:20, backgroundColor:'white'}}
93+
indicator={this._renderTabIndicator()}
94+
>
95+
<View style={{backgroundColor:'cadetblue'}}>
96+
<Text>page one</Text>
97+
</View>
98+
<View style={{backgroundColor:'cornflowerblue'}}>
99+
<Text>page two</Text>
100+
</View>
101+
<View style={{backgroundColor:'#1AA094'}}>
102+
<Text>page three</Text>
103+
</View>
104+
</IndicatorViewPager>
105+
</View>
106+
);
107+
}
108+
109+
_renderTitleIndicator() {
110+
return <PagerTitleIndicator titles={['one', 'two', 'three']} />;
111+
}
112+
113+
_renderDotIndicator() {
114+
return <PagerDotIndicator pageCount={3} />;
115+
}
116+
117+
_renderTabIndicator() {
118+
let tabs = [{
119+
text: 'Home',
120+
iconSource: require('../imgs/ic_tab_home_normal.png'),
121+
selectedIconSource: require('../imgs/ic_tab_home_click.png')
122+
},{
123+
text: 'Message',
124+
iconSource: require('../imgs/ic_tab_task_normal.png'),
125+
selectedIconSource: require('../imgs/ic_tab_task_click.png')
126+
},{
127+
text: 'Profile',
128+
iconSource: require('../imgs/ic_tab_my_normal.png'),
129+
selectedIconSource: require('../imgs/ic_tab_my_click.png')
130+
}];
131+
return <PagerTabIndicator tabs={tabs} />;
132+
}
133+
134+
}
135+
```
136+
137+
## Note
138+
139+
When use this lib in ListView header on android platform, please add `removeClippedSubviews={false}` prop to your ListView.

‎docs/dotindicator.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# <PagerDotIndicator /> Component Api
2+
3+
4+
| Prop | Type | Default | Note |
5+
| --- | --- | --- | --- |
6+
| pageCount | number | | |
7+
| dotStyle | ViewPropTypes.style | | |
8+
| selectedDotStyle | ViewPropTypes.style | | |
9+
| hideSingle | bool | | |
10+
11+

‎docs/indicatorviewpager.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# <IndicatorViewPager /> Component Api
2+
| Prop | Type | Default | Note |
3+
| --- | --- | --- | --- |
4+
| ...ViewPager.propTypes | | | |
5+
| indicator | PropTypes.node | | |
6+
| pagerStyle | ViewPropTypes.style | | |
7+
| autoPlayEnable | bool | false | |
8+
| autoPlayInterval | number | 3000 | |
9+
| horizontalScroll | bool | true | |
10+
11+

‎docs/tabindicator.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# <IndicatorViewPager /> Component Api
2+
3+
4+
| Prop | Type | Default | Note |
5+
| --- | --- | --- | --- |
6+
| tabs | PropTypes.arrayOf(PropTypes.shape({text: PropTypes.string,iconSource: Image.propTypes.source,selectedIconSource: Image.propTypes.source})) | | |
7+
| itemStyle | ViewPropTypes.style | | |
8+
| selectedItemStyle | ViewPropTypes.style | | |
9+
| iconStyle | Image.propTypes.style | | |
10+
| selectedIconStyle | Image.propTypes.style | | |
11+
| textStyle | Text.propTypes.style | | |
12+
| selectedTextStyle | Text.propTypes.style | | |
13+
| changePageWithAnimation | PropTypes.bool | true | |
14+
15+

‎docs/titleindicator.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# <PagerTitleIndicator /> Component Api
2+
3+
4+
| Prop | Type | Default | Note |
5+
| --- | --- | --- | --- |
6+
| titles | String Array | | |
7+
| itemStyle | ViewPropTypes.style | | |
8+
| itemTextStyle | Text.propTypes.style | | |
9+
| selectedItemTextStyle | Text.propTypes.style | | |
10+
| selectedBorderStyle | ViewPropTypes.style | | |
11+
| renderTitle | function | | |
12+
13+

‎docs/viewpager.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# <ViewPager /> Component Api
2+
3+
4+
| Prop | Type | Default | Note |
5+
| --- | --- | --- | --- |
6+
| initialPage | number | 0 | Index of initial page that should be selected. |
7+
| keyboardDismissMode | enum('none', "on-drag")  | on-drag | Determines whether the keyboard gets dismissed in response to a drag. - 'none' , drags do not dismiss the keyboard. - 'on-drag'(the default), the keyboard is dismissed when a drag begins. |
8+
| onPageScroll | function | | |
9+
| onPageScrollStateChanged | function | | |
10+
| onPageSelected | function | | |
11+
| horizontalScroll | bool | true | |
12+
13+
14+
| Method | Params | Default | Note |
15+
| --- | --- | --- | --- |
16+
| setPage | selectedPageIndex | | |
17+
| setPageWithoutAnimation | selectedPageIndex | | |
18+
19+

‎imgs/ad.png

28.9 KB
Loading

‎imgs/dotIndicator.gif

454 KB
Loading

‎imgs/tabIndicator.gif

557 KB
Loading

‎imgs/tabPreview.png

28.8 KB
Loading

‎imgs/titleIndicator.gif

664 KB
Loading

‎index.d.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
declare module 'rn-viewpager' {
2+
3+
import * as React from 'react';
4+
import { ImageURISource, ViewProperties, NativeScrollEvent, NativeSyntheticEvent, ViewPagerAndroidOnPageScrollEventData } from 'react-native';
5+
6+
interface ViewPagerProps extends ViewProperties {
7+
initialPage?: number;
8+
keyboardDismissMode?: 'none' | 'on-drag';
9+
onPageScroll?(e: ViewPagerAndroidOnPageScrollEventData): void;
10+
onPageScrollStateChanged?(state: 'idle' | 'settling' | 'dragging'): void;
11+
onPageSelected?(e: ViewPagerAndroidOnPageScrollEventData): void;
12+
scrollEnabled?: boolean;
13+
}
14+
15+
export class ViewPager extends React.Component<ViewPagerProps> {
16+
setPage(selectedPage: number): void;
17+
setPageWithoutAnimation(selectedPage: number): void;
18+
}
19+
20+
interface IndicatorViewPagerProps extends ViewProperties {
21+
indicator: React.ReactNode;
22+
pagerStyle?: ViewProperties['style'];
23+
autoPlayEnable?: boolean;
24+
autoPlayInterval?: boolean;
25+
horizontalScroll?: boolean;
26+
27+
}
28+
export class IndicatorViewPager extends React.Component<IndicatorViewPagerProps> {
29+
setPage(selectedPage: number): void;
30+
setPageWithoutAnimation(selectedPage: number): void;
31+
}
32+
33+
interface PagerDotIndicatorProps extends ViewProperties {
34+
pageCount: number;
35+
dotStyle?: ViewProperties['style'];
36+
selectedDotStyle?: ViewProperties['style'];
37+
hideSingle?: boolean;
38+
}
39+
40+
export class PagerDotIndicator extends React.Component<PagerDotIndicatorProps> {}
41+
42+
interface PageTitleIndicatorProps extends ViewProperties {
43+
titles: string[];
44+
trackScroll?: boolean;
45+
itemStyle?: ViewProperties['style'];
46+
itemTextStyle?: ViewProperties['style'];
47+
selectedItemTextStyle?: ViewProperties['style'];
48+
selectedBorderStyle?: ViewProperties['style'];
49+
renderTitle(index: number, title: string, isSelected: boolean): JSX.Element;
50+
}
51+
export class PagerTitleIndicator extends React.Component<PageTitleIndicatorProps> {}
52+
53+
interface PagerTabIndicatorProps extends ViewProperties {
54+
tabs: Array<{
55+
text: string,
56+
iconSource: ImageURISource,
57+
selectedIconSource: ImageURISource
58+
}>;
59+
itemStyle?: ViewProperties['style'];
60+
selectedItemStyle?: ViewProperties['style'];
61+
iconStyle?: ViewProperties['style'];
62+
selectedIconStyle?: ViewProperties['style'];
63+
textStyle?: ViewProperties['style'];
64+
selectedTextStyle?: ViewProperties['style'];
65+
changePageWithAnimation?: boolean;
66+
}
67+
68+
export class PagerTabIndicator extends React.PureComponent<PagerTabIndicatorProps> {}
69+
}

‎index.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* Created by tangzhibin on 16/3/23.
3+
*/
4+
5+
'use strict';
6+
7+
import ViewPager from './viewpager/ViewPager';
8+
import IndicatorViewPager from './viewpager/IndicatorViewPager';
9+
import PagerDotIndicator from './viewpager/indicator/PagerDotIndicator';
10+
import PagerTitleIndicator from './viewpager/indicator/PagerTitleIndicator';
11+
import PagerTabIndicator from './viewpager/indicator/PagerTabIndicator';
12+
13+
export {
14+
ViewPager,
15+
IndicatorViewPager,
16+
PagerDotIndicator,
17+
PagerTitleIndicator,
18+
PagerTabIndicator
19+
};

‎package.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "rn-viewpager",
3+
"version": "1.2.9",
4+
"description": "ViewPager component for react-native, same api on both android and ios.",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1;"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/zbtang/React-Native-ViewPager.git"
12+
},
13+
"dependencies": {
14+
"@react-native-community/viewpager": "^3.3.0"
15+
},
16+
"keywords": [
17+
"react-native-component",
18+
"react-component",
19+
"react-native",
20+
"ios",
21+
"android",
22+
"viewpager",
23+
"pager",
24+
"pageview",
25+
"page",
26+
"tab-navigator",
27+
"scrollable",
28+
"tab",
29+
"navigator",
30+
"tab-bar",
31+
"tab-view"
32+
],
33+
"author": "ZubinTang",
34+
"license": "ISC",
35+
"bugs": {
36+
"url": "https://github.com/zbtang/React-Native-ViewPager/issues"
37+
},
38+
"homepage": "https://github.com/zbtang/React-Native-ViewPager#readme"
39+
}

0 commit comments

Comments
 (0)