[leecadegh-36] Use flex for resizing and get dimensions from onLayout

timmywil · Jul 14, 2017 · 213c595 · 213c595
1 parent e20c175
commit 213c595
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -121,6 +121,8 @@ import Swiper from 'react-native-swiper';
 var styles = StyleSheet.create({
   wrapper: {
   },
+  content: {
+  },
   slide1: {
     flex: 1,
     justifyContent: 'center',
@@ -149,7 +151,7 @@ var styles = StyleSheet.create({
 var swiper = React.createClass({
   render: function() {
     return (
-      <Swiper style={styles.wrapper} showsButtons={true}>
+      <Swiper style={styles.wrapper} contentStyle={styles.content} showsButtons={true}>
         <View style={styles.slide1}>
           <Text style={styles.text}>Hello Swiper</Text>
         </View>
@@ -185,7 +187,8 @@ AppRegistry.registerComponent('myproject', () => swiper);
 | :------------ |:---------------:| :---------------:| :-----|
 | width | - | `number` | If no specify default enable fullscreen mode by `flex: 1`. |
 | height | - | `number` | If no specify default fullscreen mode by `flex: 1`. |
-| style | {...} | `style` | See default style in source. |
+| style | {...} | `style` | Customize the style of the View container. |
+| contentStyle | {...} | `style` | Customize the style of the ScrollView that has the content. |
 | loadMinimal | false | `bool` | Only load current index slide , `loadMinimalSize` slides before and after. |
 | loadMinimalSize | 1 | `number` | see `loadMinimal`   |
 | loadMinimalLoader | `<ActivityIndicator />` | `element` | Custom loader to display when slides aren't loaded
@@ -225,7 +228,6 @@ AppRegistry.registerComponent('myproject', () => swiper);
 
 | Prop  | Default  | Type | Description |
 | :------------ |:---------------:| :---------------:| :-----|
-| style | {...} | `style` | Custom styles will merge with the default styles. |
 | title | {<Text numberOfLines={1}>...</Text>} | `element` | If this parameter is not specified, will not render the title. |
 
 #### Basic props of `<ScrollView />`

diff --git a/src/index.js b/src/index.js
@@ -2,29 +2,27 @@
  * react-native-swiper
  * @author leecade<leecade@163.com>
  */
-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)