forked from leecade/react-native-swiper
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[leecadegh-36] Use flex for resizing and get dimensions from onLayout
- Loading branch information
Showing
2 changed files
with
38 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,29 +2,27 @@ | |
| * react-native-swiper | ||
| * @author leecade<[email protected]> | ||
| */ | ||
| import React, { Component, ViewPropTypes } from 'react' | ||
| import React, { Component, ViewStylePropTypes } from 'react' | ||
| import PropTypes from 'prop-types' | ||
| import { | ||
| Text, | ||
| View, | ||
| ScrollView, | ||
| Dimensions, | ||
| TouchableOpacity, | ||
| ViewPagerAndroid, | ||
| Platform, | ||
| ActivityIndicator | ||
| } from 'react-native' | ||
|
|
||
| const { width, height } = Dimensions.get('window') | ||
|
|
||
| /** | ||
| * Default styles | ||
| * @type {StyleSheetPropType} | ||
| */ | ||
| const styles = { | ||
| container: { | ||
| backgroundColor: 'transparent', | ||
| position: 'relative' | ||
| position: 'relative', | ||
| flex: 1 | ||
| }, | ||
|
|
||
| wrapper: { | ||
|
|
@@ -101,7 +99,8 @@ export default class extends Component { | |
| static propTypes = { | ||
| horizontal: PropTypes.bool, | ||
| children: PropTypes.node.isRequired, | ||
| style: ViewPropTypes.style, | ||
| style: ViewStylePropTypes, | ||
| contentStyle: ViewStylePropTypes, | ||
| pagingEnabled: PropTypes.bool, | ||
| showsHorizontalScrollIndicator: PropTypes.bool, | ||
| showsVerticalScrollIndicator: PropTypes.bool, | ||
|
|
@@ -155,7 +154,7 @@ export default class extends Component { | |
| * Init states | ||
| * @return {object} states | ||
| */ | ||
| state = this.initState(this.props, true) | ||
| state = this.initState(this.props) | ||
|
|
||
| /** | ||
| * autoplay timer | ||
|
|
@@ -165,10 +164,8 @@ export default class extends Component { | |
| loopJumpTimer = null | ||
|
|
||
| componentWillReceiveProps (nextProps) { | ||
| const sizeChanged = (nextProps.width || width) !== this.state.width || | ||
| (nextProps.height || height) !== this.state.height | ||
| if (!nextProps.autoplay && this.autoplayTimer) clearTimeout(this.autoplayTimer) | ||
| this.setState(this.initState(nextProps, sizeChanged)) | ||
| this.setState(this.initState(nextProps)) | ||
| } | ||
|
|
||
| componentDidMount () { | ||
|
|
@@ -180,7 +177,7 @@ export default class extends Component { | |
| this.loopJumpTimer && clearTimeout(this.loopJumpTimer) | ||
| } | ||
|
|
||
| initState (props, setOffsetInState) { | ||
| initState (props) { | ||
| // set the current state | ||
| const state = this.state || {} | ||
|
|
||
|
|
@@ -199,32 +196,11 @@ export default class extends Component { | |
| // retain the index | ||
| initState.index = state.index | ||
| } else { | ||
| // reset the index | ||
| setOffsetInState = true // if the index is reset, go ahead and update the offset in state | ||
| initState.index = initState.total > 1 ? Math.min(props.index, initState.total - 1) : 0 | ||
| } | ||
|
|
||
| // Default: horizontal | ||
| initState.dir = props.horizontal === false ? 'y' : 'x' | ||
| initState.width = props.width || width | ||
| initState.height = props.height || height | ||
| newInternals.offset = {} | ||
|
|
||
| if (initState.total > 1) { | ||
| let setup = initState.index | ||
| if (props.loop) { | ||
| setup++ | ||
| } | ||
| newInternals.offset[initState.dir] = initState.dir === 'y' | ||
| ? initState.height * setup | ||
| : initState.width * setup | ||
| } | ||
|
|
||
| // only update the offset in state if needed, updating offset while swiping | ||
| // causes some bad jumping / stuttering | ||
| if (setOffsetInState) { | ||
| initState.offset = newInternals.offset | ||
| } | ||
|
|
||
| this.internals = newInternals | ||
| return initState | ||
|
|
@@ -235,6 +211,29 @@ export default class extends Component { | |
| return Object.assign({}, this.state, this.internals) | ||
| } | ||
|
|
||
| setDimensions = (event) => { | ||
| const { width, height } = event.nativeEvent.layout | ||
| const offset = this.internals.offset = {} | ||
| const state = { width, height } | ||
|
|
||
| if (this.state.total > 1) { | ||
| let setup = this.state.index | ||
| if (this.props.loop) { | ||
| setup++ | ||
| } | ||
| offset[this.state.dir] = this.state.dir === 'y' | ||
| ? height * setup | ||
| : width * setup | ||
| } | ||
|
|
||
| // only update the offset in state if needed, updating offset while swiping | ||
| // causes some bad jumping / stuttering | ||
| if (width !== this.state.width || height !== this.state.height) { | ||
| state.offset = offset | ||
| } | ||
| this.setState(state) | ||
| } | ||
|
|
||
| loopJump = () => { | ||
| if (!this.state.loopJump) return | ||
| const i = this.state.index + (this.props.loop ? 1 : 0) | ||
|
|
@@ -551,7 +550,7 @@ export default class extends Component { | |
| <ScrollView ref='scrollView' | ||
| {...this.props} | ||
| {...this.scrollViewPropOverrides()} | ||
| contentContainerStyle={[styles.wrapper, this.props.style]} | ||
| contentContainerStyle={[styles.wrapper, this.props.contentStyle]} | ||
| contentOffset={this.state.offset} | ||
| onScrollBeginDrag={this.onScrollBegin} | ||
| onMomentumScrollEnd={this.onScrollEnd} | ||
|
|
@@ -626,10 +625,7 @@ export default class extends Component { | |
| } | ||
|
|
||
| return ( | ||
| <View style={[styles.container, { | ||
| width: state.width, | ||
| height: state.height | ||
| }]}> | ||
| <View style={[styles.container, this.props.style]} onLayout={this.setDimensions}> | ||
| {this.renderScrollView(pages)} | ||
| {props.showsPagination && (props.renderPagination | ||
| ? this.props.renderPagination(state.index, state.total, this) | ||
|
|
||