diff --git a/DefaultViewPageIndicator.js b/DefaultViewPageIndicator.js index 320d4a2..265ad22 100644 --- a/DefaultViewPageIndicator.js +++ b/DefaultViewPageIndicator.js @@ -2,6 +2,8 @@ var React = require('react'); var ReactNative = require('react-native'); +var PropTypes = require('prop-types'); +var createReactClass = require('create-react-class'); var { Dimensions, StyleSheet, @@ -41,16 +43,16 @@ var styles = StyleSheet.create({ height: DOT_SIZE, borderRadius: DOT_SIZE / 2, backgroundColor: '#80ACD0', - margin: DOT_SAPCE, + marginHorizontal: DOT_SAPCE, bottom: 0, }, }); -var DefaultViewPageIndicator = React.createClass({ +var DefaultViewPageIndicator = createReactClass({ propTypes: { - goToPage: React.PropTypes.func, - activePage: React.PropTypes.number, - pageCount: React.PropTypes.number + goToPage: PropTypes.func, + activePage: PropTypes.number, + pageCount: PropTypes.number }, getInitialState() { diff --git a/Sample/android/app/src/main/AndroidManifest.xml b/Sample/android/app/src/main/AndroidManifest.xml index dca7ab9..7d1dbe3 100644 --- a/Sample/android/app/src/main/AndroidManifest.xml +++ b/Sample/android/app/src/main/AndroidManifest.xml @@ -10,7 +10,8 @@ android:theme="@style/AppTheme"> + android:label="@string/app_name" + android:exported="true"> diff --git a/ViewPager.js b/ViewPager.js index d2922fd..42bc382 100644 --- a/ViewPager.js +++ b/ViewPager.js @@ -2,7 +2,7 @@ var React = require('react'); var PropTypes = require('prop-types'); - +var createReactClass = require('create-react-class'); var ReactNative = require('react-native'); var { Dimensions, @@ -12,6 +12,7 @@ var { PanResponder, Animated, StyleSheet, + ViewPropTypes, } = ReactNative; var StaticRenderer = require('react-native/Libraries/Components/StaticRenderer'); @@ -21,7 +22,7 @@ var DefaultViewPageIndicator = require('./DefaultViewPageIndicator'); var deviceWidth = Dimensions.get('window').width; var ViewPagerDataSource = require('./ViewPagerDataSource'); -var ViewPager = React.createClass({ +var ViewPager = createReactClass({ mixins: [TimerMixin], statics: { @@ -29,7 +30,7 @@ var ViewPager = React.createClass({ }, propTypes: { - ...View.propTypes, + ...ViewPropTypes, dataSource: PropTypes.instanceOf(ViewPagerDataSource).isRequired, renderPage: PropTypes.func.isRequired, onChangePage: PropTypes.func, @@ -49,7 +50,8 @@ var ViewPager = React.createClass({ getDefaultProps() { return { isLoop: false, - locked: false, + locked: false, + autoScrollInterval: 5000, animation: function(animate, toValue, gs) { return Animated.spring(animate, { @@ -86,7 +88,8 @@ var ViewPager = React.createClass({ this.props.hasTouch && this.props.hasTouch(false); - this.movePage(step, gestureState); + this.movePage(step, gestureState); + this.restartTimer() } this._panResponder = PanResponder.create({ @@ -142,7 +145,7 @@ var ViewPager = React.createClass({ } } - if (nextProps.dataSource) { + if (nextProps.dataSource && nextProps.dataSource !== this.props.dataSource) { var maxPage = nextProps.dataSource.getPageCount() - 1; var constrainedPage = Math.max(0, Math.min(this.state.currentPage, maxPage)); this.setState({ @@ -163,11 +166,19 @@ var ViewPager = React.createClass({ if (!this._autoPlayer) { this._autoPlayer = this.setInterval( () => {this.movePage(1);}, - 5000 + this.props.autoScrollInterval ); } }, + restartTimer() { + if (this._autoPlayer) { + this.clearInterval(this._autoPlayer); + this._autoPlayer = null; + this._startAutoPlay() + } + }, + goToPage(pageNumber, animate = true) { var pageCount = this.props.dataSource.getPageCount();