diff --git a/README.md b/README.md index 2709a53..2f306cd 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,7 @@ var ViewPager = require('react-native-viewpager'); * **`onChangePage`**: page change callback, * **`renderPageIndicator`**: render custom ViewPager indicator. * **`initialPage`**: show initially some other page than first page. +* **`selectedPage`**: allow parent component to change page of pager. ## Page Transition Animation Controls @@ -49,6 +50,8 @@ var ViewPager = require('react-native-viewpager'); this.setState({currentPage:page})} //sync parent state with component state; animation = {(animatedValue, toValue, gestureState) => { // Use the horizontal velocity of the swipe gesture // to affect the length of the transition so the faster you swipe diff --git a/ViewPager.js b/ViewPager.js index dba9b45..2e856d0 100644 --- a/ViewPager.js +++ b/ViewPager.js @@ -37,6 +37,7 @@ var ViewPager = React.createClass({ PropTypes.func, PropTypes.bool ]), + selectedPage:PropTypes.number, isLoop: PropTypes.bool, locked: PropTypes.bool, autoPlay: PropTypes.bool, @@ -141,20 +142,25 @@ var ViewPager = React.createClass({ this._autoPlayer = null; } } - + var controledPageChanged = Boolean(nextProps.selectedPage && nextProps.selectedPage !== this.state.currentPage); if (nextProps.dataSource) { var maxPage = nextProps.dataSource.getPageCount() - 1; - var constrainedPage = Math.max(0, Math.min(this.state.currentPage, maxPage)); - this.setState({ - currentPage: constrainedPage, - }); - + var constrainedPage = Math.max(0, Math.min(controledPageChanged ? nextProps.selectedPage : this.state.currentPage, maxPage)); + if (!nextProps.isLoop) { this.state.scrollValue.setValue(constrainedPage > 0 ? 1 : 0); } this.childIndex = Math.min(this.childIndex, constrainedPage); this.fling = false; + + if (controledPageChanged) { + this.goToPage( nextProps.selectedPage ); + } else { + this.setState({ + currentPage: constrainedPage, + }); + } } },