From 5c606e8c0f8e5f9064fc4ecd3395e5b7077cda01 Mon Sep 17 00:00:00 2001 From: Edmond Date: Thu, 4 Jan 2018 19:30:05 +0800 Subject: [PATCH 1/2] modify ViewPager.js and viewpager.md --- docs/viewpager.md | 2 +- viewpager/ViewPager.js | 282 ++++++++++++++++++++--------------------- 2 files changed, 141 insertions(+), 143 deletions(-) diff --git a/docs/viewpager.md b/docs/viewpager.md index a15bb4aa..9963e66a 100644 --- a/docs/viewpager.md +++ b/docs/viewpager.md @@ -8,7 +8,7 @@ | onPageScroll | function | | | | onPageScrollStateChanged | function | | | | onPageSelected | function | | | -| scrollEnabled | bool | false | | +| horizontalScroll | bool | true | | | Method | Params | Default | Note | diff --git a/viewpager/ViewPager.js b/viewpager/ViewPager.js index 41f8f1b0..da352636 100644 --- a/viewpager/ViewPager.js +++ b/viewpager/ViewPager.js @@ -18,166 +18,164 @@ const SCROLL_STATE = { export default class ViewPager extends Component { static propTypes = {...ViewPagerAndroid.propTypes} - static defaultProps = { - initialPage: 0, - keyboardDismissMode: 'on-drag', - onPageScroll: null, - onPageSelected: null, - onPageScrollStateChanged: null, - pageMargin: 0, - horizontalScroll: true - } - +static defaultProps = { + initialPage: 0, + keyboardDismissMode: 'on-drag', + onPageScroll: null, + onPageSelected: null, + onPageScrollStateChanged: null, + pageMargin: 0, + horizontalScroll: true +} - _scrollState = SCROLL_STATE.idle - - _preScrollX = null - - _panResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => true, - onMoveShouldSetPanResponder: () => true, - onPanResponderGrant: () => this._setScrollState(SCROLL_STATE.dragging), - onPanResponderMove: () => null, - onPanResponderRelease: () => this._setScrollState(SCROLL_STATE.settling), - onPanResponderTerminate: () => null, - onPanResponderTerminationRequest: (evt, gestureState) => true - }) - - constructor (props) { - super(props) - this._onPageScrollOnAndroid = this._onPageScrollOnAndroid.bind(this) - this._onPageSelectedOnAndroid = this._onPageSelectedOnAndroid.bind(this) - this._renderOnIOS = this._renderOnIOS.bind(this) - this._onScrollOnIOS = this._onScrollOnIOS.bind(this) - this._onScrollViewLayout = this._onScrollViewLayout.bind(this) - this._childrenWithOverridenStyle = this._childrenWithOverridenStyle.bind(this) - this._setScrollState = this._setScrollState.bind(this) - this.setPageWithoutAnimation = this.setPageWithoutAnimation.bind(this) - this.setPage = this.setPage.bind(this) - this.state = {width: 0, height: 0, page: props.initialPage} - } +state = {width: 0, height: 0} + +_scrollState = SCROLL_STATE.idle + +_preScrollX = null + +_panResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onMoveShouldSetPanResponder: () => true, + onPanResponderGrant: () => this._setScrollState(SCROLL_STATE.dragging), + onPanResponderMove: () => null, + onPanResponderRelease: () => this._setScrollState(SCROLL_STATE.settling), + onPanResponderTerminate: () => null, + onPanResponderTerminationRequest: (evt, gestureState) => true +}) + +constructor (props) { + super(props) + this._onPageScrollOnAndroid = this._onPageScrollOnAndroid.bind(this) + this._onPageSelectedOnAndroid = this._onPageSelectedOnAndroid.bind(this) + this._renderOnIOS = this._renderOnIOS.bind(this) + this._onScrollOnIOS = this._onScrollOnIOS.bind(this) + this._onScrollViewLayout = this._onScrollViewLayout.bind(this) + this._childrenWithOverridenStyle = this._childrenWithOverridenStyle.bind(this) + this._setScrollState = this._setScrollState.bind(this) + this.setPageWithoutAnimation = this.setPageWithoutAnimation.bind(this) + this.setPage = this.setPage.bind(this) +} - render () { - return (this.props.forceScrollView || Platform.OS === 'ios') ? this._renderOnIOS() : ( - - ) - } +render () { + return (this.props.forceScrollView || Platform.OS === 'ios') ? this._renderOnIOS() : ( + +) +} - _onPageScrollOnAndroid (e) { - if (this.props.onPageScroll) this.props.onPageScroll(e.nativeEvent) - } +_onPageScrollOnAndroid (e) { + if (this.props.onPageScroll) this.props.onPageScroll(e.nativeEvent) +} - _onPageSelectedOnAndroid (e) { - if (this.props.onPageSelected) this.props.onPageSelected(e.nativeEvent) - } +_onPageSelectedOnAndroid (e) { + if (this.props.onPageSelected) this.props.onPageSelected(e.nativeEvent) +} - _renderOnIOS () { - let childrenCount = this.props.children ? this.props.children.length : 0 - let initialPage = Math.min(Math.max(0, this.props.initialPage), childrenCount - 1) - let needMonitorScroll = !!this.props.onPageScroll || !!this.props.onPageSelected || !!this.props.onPageScrollStateChanged - let needMonitorTouch = !!this.props.onPageScrollStateChanged - let props = { +_renderOnIOS () { + let childrenCount = this.props.children ? this.props.children.length : 0 + let initialPage = Math.min(Math.max(0, this.props.initialPage), childrenCount - 1) + let needMonitorScroll = !!this.props.onPageScroll || !!this.props.onPageSelected || !!this.props.onPageScrollStateChanged + let needMonitorTouch = !!this.props.onPageScrollStateChanged + let props = { ...this.props, - ref: SCROLLVIEW_REF, - onLayout: this._onScrollViewLayout, - horizontal: true, - pagingEnabled: this.props.horizontalScroll ? true : false, - scrollsToTop: false, - showsHorizontalScrollIndicator: false, - showsVerticalScrollIndicator: false, - children: this._childrenWithOverridenStyle(), - contentOffset: {x: this.state.width * initialPage, y: 0}, - decelerationRate: 0.9, - onScroll: needMonitorScroll ? this._onScrollOnIOS : null, - scrollEventThrottle: needMonitorScroll ? ( this.props.onPageScroll ? 8 : 1) : 0 - } - if (needMonitorTouch) props = Object.assign(props, this._panResponder.panHandlers) - const scrollViewStyle = { - overflow: 'visible', - marginHorizontal: -this.props.pageMargin / 2 - } - if (this.props.style && !this.props.style.height) - return - else return ( - - - - ) + ref: SCROLLVIEW_REF, + onLayout: this._onScrollViewLayout, + horizontal: true, + pagingEnabled: this.props.horizontalScroll ? true : false, + scrollEnabled: this.props.horizontalScroll ? true : false, + scrollsToTop: false, + showsHorizontalScrollIndicator: false, + showsVerticalScrollIndicator: false, + children: this._childrenWithOverridenStyle(), + contentOffset: {x: this.state.width * initialPage, y: 0}, + decelerationRate: 0.9, + onScroll: needMonitorScroll ? this._onScrollOnIOS : null, + scrollEventThrottle: needMonitorScroll ? ( this.props.onPageScroll ? 8 : 1) : 0 +} + if (needMonitorTouch) props = Object.assign(props, this._panResponder.panHandlers) + const scrollViewStyle = { + overflow: 'visible', + marginHorizontal: -this.props.pageMargin / 2 } + if (this.props.style && !this.props.style.height) + return +else return ( + + + +) +} - _onScrollOnIOS (e) { - let {x} = e.nativeEvent.contentOffset, offset, position = Math.floor(x / this.state.width) - if (x === this._preScrollX) return - this._preScrollX = x - offset = x / this.state.width - position +_onScrollOnIOS (e) { + let {x} = e.nativeEvent.contentOffset, offset, position = Math.floor(x / this.state.width) + if (x === this._preScrollX) return + this._preScrollX = x + offset = x / this.state.width - position - if (this.props.onPageScroll) this.props.onPageScroll({offset, position}) + if (this.props.onPageScroll) this.props.onPageScroll({offset, position}) - if (this.props.onPageSelected && offset === 0) { - this.props.onPageSelected({position}) - this.props.onPageScrollStateChanged && this._setScrollState(SCROLL_STATE.idle) - this.setState({page: position}) - } + if (this.props.onPageSelected && offset === 0) { + this.props.onPageSelected({position}) + this.props.onPageScrollStateChanged && this._setScrollState(SCROLL_STATE.idle) } +} - _onScrollViewLayout (event) { - let {width, height} = event.nativeEvent.layout - this.setState({width, height}, () => Platform.OS === 'ios' && this.setPageWithoutAnimation(this.state.page)) - } +_onScrollViewLayout (event) { + let {width, height} = event.nativeEvent.layout + this.setState({width, height}) +} - _childrenWithOverridenStyle () { - if (this.state.width === 0 || this.state.height === 0) return null - return React.Children.map(this.props.children, (child) => { - if (!child)return null - let newProps = { - ...child.props, - style: [child.props.style, { - width: this.state.width, - height: this.state.height, - position: null - }], - collapsable: false - } - if (child.type && - child.type.displayName && - (child.type.displayName !== 'RCTView') && - (child.type.displayName !== 'View')) { - console.warn('Each ViewPager child must be a . Was ' + child.type.displayName) - } - return React.createElement(child.type, newProps) - }) +_childrenWithOverridenStyle () { + if (this.state.width === 0 || this.state.height === 0) return null + return React.Children.map(this.props.children, (child) => { + if (!child)return null + let newProps = { + ...child.props, + style: [child.props.style, { + width: this.state.width, + height: this.state.height, + position: null + }], + collapsable: false +} + if (child.type && + child.type.displayName && + (child.type.displayName !== 'RCTView') && + (child.type.displayName !== 'View')) { + console.warn('Each ViewPager child must be a . Was ' + child.type.displayName) } + return React.createElement(child.type, newProps) +}) +} - _setScrollState (scrollState) { - if (scrollState === this._scrollState) return - this.props.onPageScrollStateChanged && this.props.onPageScrollStateChanged(scrollState) - this._scrollState = scrollState - } +_setScrollState (scrollState) { + if (scrollState === this._scrollState) return + this.props.onPageScrollStateChanged && this.props.onPageScrollStateChanged(scrollState) + this._scrollState = scrollState +} - setPageWithoutAnimation (selectedPage) { - this.setState({page: selectedPage}) - if (this.props.forceScrollView || Platform.OS === 'ios') - this.refs[SCROLLVIEW_REF].scrollTo({x: this.state.width * selectedPage, animated: false}) - else { - this.refs[VIEWPAGER_REF].setPageWithoutAnimation(selectedPage) - if (this.props.onPageSelected) this.props.onPageSelected({position: selectedPage}) - } +setPageWithoutAnimation (selectedPage) { + if (this.props.forceScrollView || Platform.OS === 'ios') + this.refs[SCROLLVIEW_REF].scrollTo({x: this.state.width * selectedPage, animated: false}) + else { + this.refs[VIEWPAGER_REF].setPageWithoutAnimation(selectedPage) + if (this.props.onPageSelected) this.props.onPageSelected({position: selectedPage}) } +} - setPage (selectedPage) { - this.setState({page: selectedPage}) - if (this.props.forceScrollView || Platform.OS === 'ios') this.refs[SCROLLVIEW_REF].scrollTo({x: this.state.width * selectedPage}) - else { - this.refs[VIEWPAGER_REF].setPage(selectedPage) - if (this.props.onPageSelected) this.props.onPageSelected({position: selectedPage}) - } +setPage (selectedPage) { + if (this.props.forceScrollView || Platform.OS === 'ios') this.refs[SCROLLVIEW_REF].scrollTo({x: this.state.width * selectedPage}) + else { + this.refs[VIEWPAGER_REF].setPage(selectedPage) + if (this.props.onPageSelected) this.props.onPageSelected({position: selectedPage}) } +} } From c916de74f5fece0d82b007c3512bcc9f96651f55 Mon Sep 17 00:00:00 2001 From: Edmond Date: Thu, 4 Jan 2018 19:34:41 +0800 Subject: [PATCH 2/2] recivery some code --- viewpager/ViewPager.js | 283 +++++++++++++++++++++-------------------- 1 file changed, 143 insertions(+), 140 deletions(-) diff --git a/viewpager/ViewPager.js b/viewpager/ViewPager.js index da352636..732db756 100644 --- a/viewpager/ViewPager.js +++ b/viewpager/ViewPager.js @@ -18,164 +18,167 @@ const SCROLL_STATE = { export default class ViewPager extends Component { static propTypes = {...ViewPagerAndroid.propTypes} -static defaultProps = { - initialPage: 0, - keyboardDismissMode: 'on-drag', - onPageScroll: null, - onPageSelected: null, - onPageScrollStateChanged: null, - pageMargin: 0, - horizontalScroll: true -} + static defaultProps = { + initialPage: 0, + keyboardDismissMode: 'on-drag', + onPageScroll: null, + onPageSelected: null, + onPageScrollStateChanged: null, + pageMargin: 0, + horizontalScroll: true + } -state = {width: 0, height: 0} - -_scrollState = SCROLL_STATE.idle - -_preScrollX = null - -_panResponder = PanResponder.create({ - onStartShouldSetPanResponder: () => true, - onMoveShouldSetPanResponder: () => true, - onPanResponderGrant: () => this._setScrollState(SCROLL_STATE.dragging), - onPanResponderMove: () => null, - onPanResponderRelease: () => this._setScrollState(SCROLL_STATE.settling), - onPanResponderTerminate: () => null, - onPanResponderTerminationRequest: (evt, gestureState) => true -}) - -constructor (props) { - super(props) - this._onPageScrollOnAndroid = this._onPageScrollOnAndroid.bind(this) - this._onPageSelectedOnAndroid = this._onPageSelectedOnAndroid.bind(this) - this._renderOnIOS = this._renderOnIOS.bind(this) - this._onScrollOnIOS = this._onScrollOnIOS.bind(this) - this._onScrollViewLayout = this._onScrollViewLayout.bind(this) - this._childrenWithOverridenStyle = this._childrenWithOverridenStyle.bind(this) - this._setScrollState = this._setScrollState.bind(this) - this.setPageWithoutAnimation = this.setPageWithoutAnimation.bind(this) - this.setPage = this.setPage.bind(this) -} -render () { - return (this.props.forceScrollView || Platform.OS === 'ios') ? this._renderOnIOS() : ( - -) -} + _scrollState = SCROLL_STATE.idle + + _preScrollX = null + + _panResponder = PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onMoveShouldSetPanResponder: () => true, + onPanResponderGrant: () => this._setScrollState(SCROLL_STATE.dragging), + onPanResponderMove: () => null, + onPanResponderRelease: () => this._setScrollState(SCROLL_STATE.settling), + onPanResponderTerminate: () => null, + onPanResponderTerminationRequest: (evt, gestureState) => true + }) + + constructor (props) { + super(props) + this._onPageScrollOnAndroid = this._onPageScrollOnAndroid.bind(this) + this._onPageSelectedOnAndroid = this._onPageSelectedOnAndroid.bind(this) + this._renderOnIOS = this._renderOnIOS.bind(this) + this._onScrollOnIOS = this._onScrollOnIOS.bind(this) + this._onScrollViewLayout = this._onScrollViewLayout.bind(this) + this._childrenWithOverridenStyle = this._childrenWithOverridenStyle.bind(this) + this._setScrollState = this._setScrollState.bind(this) + this.setPageWithoutAnimation = this.setPageWithoutAnimation.bind(this) + this.setPage = this.setPage.bind(this) + this.state = {width: 0, height: 0, page: props.initialPage} + } -_onPageScrollOnAndroid (e) { - if (this.props.onPageScroll) this.props.onPageScroll(e.nativeEvent) -} + render () { + return (this.props.forceScrollView || Platform.OS === 'ios') ? this._renderOnIOS() : ( + + ) + } -_onPageSelectedOnAndroid (e) { - if (this.props.onPageSelected) this.props.onPageSelected(e.nativeEvent) -} + _onPageScrollOnAndroid (e) { + if (this.props.onPageScroll) this.props.onPageScroll(e.nativeEvent) + } + + _onPageSelectedOnAndroid (e) { + if (this.props.onPageSelected) this.props.onPageSelected(e.nativeEvent) + } -_renderOnIOS () { - let childrenCount = this.props.children ? this.props.children.length : 0 - let initialPage = Math.min(Math.max(0, this.props.initialPage), childrenCount - 1) - let needMonitorScroll = !!this.props.onPageScroll || !!this.props.onPageSelected || !!this.props.onPageScrollStateChanged - let needMonitorTouch = !!this.props.onPageScrollStateChanged - let props = { + _renderOnIOS () { + let childrenCount = this.props.children ? this.props.children.length : 0 + let initialPage = Math.min(Math.max(0, this.props.initialPage), childrenCount - 1) + let needMonitorScroll = !!this.props.onPageScroll || !!this.props.onPageSelected || !!this.props.onPageScrollStateChanged + let needMonitorTouch = !!this.props.onPageScrollStateChanged + let props = { ...this.props, - ref: SCROLLVIEW_REF, - onLayout: this._onScrollViewLayout, - horizontal: true, - pagingEnabled: this.props.horizontalScroll ? true : false, - scrollEnabled: this.props.horizontalScroll ? true : false, - scrollsToTop: false, - showsHorizontalScrollIndicator: false, - showsVerticalScrollIndicator: false, - children: this._childrenWithOverridenStyle(), - contentOffset: {x: this.state.width * initialPage, y: 0}, - decelerationRate: 0.9, - onScroll: needMonitorScroll ? this._onScrollOnIOS : null, - scrollEventThrottle: needMonitorScroll ? ( this.props.onPageScroll ? 8 : 1) : 0 -} - if (needMonitorTouch) props = Object.assign(props, this._panResponder.panHandlers) - const scrollViewStyle = { - overflow: 'visible', - marginHorizontal: -this.props.pageMargin / 2 + ref: SCROLLVIEW_REF, + onLayout: this._onScrollViewLayout, + horizontal: true, + pagingEnabled: this.props.horizontalScroll ? true : false, + scrollEnabled: this.props.horizontalScroll ? true : false, + scrollsToTop: false, + showsHorizontalScrollIndicator: false, + showsVerticalScrollIndicator: false, + children: this._childrenWithOverridenStyle(), + contentOffset: {x: this.state.width * initialPage, y: 0}, + decelerationRate: 0.9, + onScroll: needMonitorScroll ? this._onScrollOnIOS : null, + scrollEventThrottle: needMonitorScroll ? ( this.props.onPageScroll ? 8 : 1) : 0 + } + if (needMonitorTouch) props = Object.assign(props, this._panResponder.panHandlers) + const scrollViewStyle = { + overflow: 'visible', + marginHorizontal: -this.props.pageMargin / 2 + } + if (this.props.style && !this.props.style.height) + return + else return ( + + + + ) } - if (this.props.style && !this.props.style.height) - return -else return ( - - - -) -} -_onScrollOnIOS (e) { - let {x} = e.nativeEvent.contentOffset, offset, position = Math.floor(x / this.state.width) - if (x === this._preScrollX) return - this._preScrollX = x - offset = x / this.state.width - position + _onScrollOnIOS (e) { + let {x} = e.nativeEvent.contentOffset, offset, position = Math.floor(x / this.state.width) + if (x === this._preScrollX) return + this._preScrollX = x + offset = x / this.state.width - position - if (this.props.onPageScroll) this.props.onPageScroll({offset, position}) + if (this.props.onPageScroll) this.props.onPageScroll({offset, position}) - if (this.props.onPageSelected && offset === 0) { - this.props.onPageSelected({position}) - this.props.onPageScrollStateChanged && this._setScrollState(SCROLL_STATE.idle) + if (this.props.onPageSelected && offset === 0) { + this.props.onPageSelected({position}) + this.props.onPageScrollStateChanged && this._setScrollState(SCROLL_STATE.idle) + this.setState({page: position}) + } } -} -_onScrollViewLayout (event) { - let {width, height} = event.nativeEvent.layout - this.setState({width, height}) -} + _onScrollViewLayout (event) { + let {width, height} = event.nativeEvent.layout + this.setState({width, height}, () => Platform.OS === 'ios' && this.setPageWithoutAnimation(this.state.page)) + } -_childrenWithOverridenStyle () { - if (this.state.width === 0 || this.state.height === 0) return null - return React.Children.map(this.props.children, (child) => { - if (!child)return null - let newProps = { - ...child.props, - style: [child.props.style, { - width: this.state.width, - height: this.state.height, - position: null - }], - collapsable: false -} - if (child.type && - child.type.displayName && - (child.type.displayName !== 'RCTView') && - (child.type.displayName !== 'View')) { - console.warn('Each ViewPager child must be a . Was ' + child.type.displayName) + _childrenWithOverridenStyle () { + if (this.state.width === 0 || this.state.height === 0) return null + return React.Children.map(this.props.children, (child) => { + if (!child)return null + let newProps = { + ...child.props, + style: [child.props.style, { + width: this.state.width, + height: this.state.height, + position: null + }], + collapsable: false + } + if (child.type && + child.type.displayName && + (child.type.displayName !== 'RCTView') && + (child.type.displayName !== 'View')) { + console.warn('Each ViewPager child must be a . Was ' + child.type.displayName) + } + return React.createElement(child.type, newProps) + }) } - return React.createElement(child.type, newProps) -}) -} -_setScrollState (scrollState) { - if (scrollState === this._scrollState) return - this.props.onPageScrollStateChanged && this.props.onPageScrollStateChanged(scrollState) - this._scrollState = scrollState -} + _setScrollState (scrollState) { + if (scrollState === this._scrollState) return + this.props.onPageScrollStateChanged && this.props.onPageScrollStateChanged(scrollState) + this._scrollState = scrollState + } -setPageWithoutAnimation (selectedPage) { - if (this.props.forceScrollView || Platform.OS === 'ios') - this.refs[SCROLLVIEW_REF].scrollTo({x: this.state.width * selectedPage, animated: false}) - else { - this.refs[VIEWPAGER_REF].setPageWithoutAnimation(selectedPage) - if (this.props.onPageSelected) this.props.onPageSelected({position: selectedPage}) + setPageWithoutAnimation (selectedPage) { + this.setState({page: selectedPage}) + if (this.props.forceScrollView || Platform.OS === 'ios') + this.refs[SCROLLVIEW_REF].scrollTo({x: this.state.width * selectedPage, animated: false}) + else { + this.refs[VIEWPAGER_REF].setPageWithoutAnimation(selectedPage) + if (this.props.onPageSelected) this.props.onPageSelected({position: selectedPage}) + } } -} -setPage (selectedPage) { - if (this.props.forceScrollView || Platform.OS === 'ios') this.refs[SCROLLVIEW_REF].scrollTo({x: this.state.width * selectedPage}) - else { - this.refs[VIEWPAGER_REF].setPage(selectedPage) - if (this.props.onPageSelected) this.props.onPageSelected({position: selectedPage}) + setPage (selectedPage) { + this.setState({page: selectedPage}) + if (this.props.forceScrollView || Platform.OS === 'ios') this.refs[SCROLLVIEW_REF].scrollTo({x: this.state.width * selectedPage}) + else { + this.refs[VIEWPAGER_REF].setPage(selectedPage) + if (this.props.onPageSelected) this.props.onPageSelected({position: selectedPage}) + } } -} }