rn-viewpager-q5
v1.3.0
ViewPager component for react-native, same api on both android and ios.
0/weekUpdated 3 years agoISCUnpacked: 36.7 KB
Published by ZubinTang
npm install rn-viewpager-q5React-Native-ViewPager
  
ViewPager and Indicator component for react-native on both android and ios. ViewPager's props is the same as ViewPagerAndroid.
Features
- unify \
- \
- implement common indicator: DotIndicator, TitleIndicator and TabIndicator
Preview
download demo apk file
Build and run the demo
`` `
cd RNViewPagerDemo/
npm install
react-native run-ios
Component API
Usage
$3
npm install --save rn-viewpager
$3
jsx import {StyleSheet, View, Text} from 'react-native';
import React, {Component} from 'react';
import {PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';
export default class ViewPagerPage extends Component {
render() {
return (
indicator={this._renderDotIndicator()}
>
page one
page two
page three
indicator={this._renderTitleIndicator()}
>
page one
page two
page three
indicator={this._renderTabIndicator()}
>
page one
page two
page three
);
}
_renderTitleIndicator() {
return
}
_renderDotIndicator() {
return
}
_renderTabIndicator() {
let tabs = [{
text: 'Home',
iconSource: require('../imgs/ic_tab_home_normal.png'),
selectedIconSource: require('../imgs/ic_tab_home_click.png')
},{
text: 'Message',
iconSource: require('../imgs/ic_tab_task_normal.png'),
selectedIconSource: require('../imgs/ic_tab_task_click.png')
},{
text: 'Profile',
iconSource: require('../imgs/ic_tab_my_normal.png'),
selectedIconSource: require('../imgs/ic_tab_my_click.png')
}];
return
}
}
`Note
When use this lib in ListView header on android platform, please add