support rn 0.60, up to 0.7.0

README.md

@@ -16,6 +16,7 @@ npm install
 ```
 To run example on iOS:
 ```
+cd ios && pod install && cd ..
 react-native run-ios
 ```
 To run example on Android:

components/AlbumView/AlbumSheet.js

@@ -49,23 +49,23 @@ export default class AlbumSheet extends TransformView {
   }
 
   componentDidMount() {
-    this.loadImage(this.props);
+    this.loadImage();
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.image != this.props.image || nextProps.load != this.props.load) {
-      this.loadImage(nextProps);
+  componentDidUpdate(prevProps) {
+    if (prevProps.image != this.props.image || prevProps.load != this.props.load) {
+      this.loadImage();
     }
   }
 
-  loadImage(props) {
-    let {image, thumb, load, onWillLoadImage, onLoadImageSuccess, onLoadImageFailure} = props;
+  loadImage() {
+    let {image, thumb, load, onWillLoadImage, onLoadImageSuccess, onLoadImageFailure} = this.props;
     let {imageLoaded, thumbLoaded} = this.state;
 
     if (!load) return;
 
     if (React.isValidElement(image)) {
-      let {width, height} = this.getElementSize(props.image);
+      let {width, height} = this.getElementSize(image);
       this.imageSizeChange(width, height);
       this.setState({imageLoaded: true});
     } else {

components/AlbumView/AlbumView.deprecated.js

@@ -59,13 +59,13 @@ export default class AlbumView extends Component {
     this.preloadImage(this.state.index);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate(prevProps) {
     let {imageInfos, index} = this.state;
-    if ((nextProps.index || nextProps.index === 0) && nextProps.index != this.props.index) {
-      index = nextProps.index;
+    if ((this.props.index || this.props.index === 0) && prevProps.index != this.props.index) {
+      index = this.props.index;
     }
-    if (nextProps.images.length != this.props.images.length) {
-      imageInfos = this.initImageInfos(nextProps.images);
+    if (prevProps.images.length != this.props.images.length) {
+      imageInfos = this.initImageInfos(this.props.images);
     }
     this.preloadImage(index);
     this.setState({index, imageInfos}, () => this.checkLeftRight());

components/AlbumView/AlbumView.js

@@ -52,9 +52,9 @@ export default class AlbumView extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    if ((nextProps.index || nextProps.index === 0) && nextProps.index != this.props.index) {
-      this.changeIndex(nextProps.index);
+  componentDidUpdate(prevProps) {
+    if ((this.props.index || this.props.index === 0) && prevProps.index != this.props.index) {
+      this.changeIndex(this.props.index);
     }
   }
 

components/BasePage/BasePage.js

@@ -38,17 +38,14 @@ export default class BasePage extends Component {
     };
   }
 
-  componentWillMount() {
+  componentDidMount() {
+    this.didMount = true;
     if (!this.backListener && Platform.OS === 'android') {
       let BackHandler = ReactNative.BackHandler ? ReactNative.BackHandler : ReactNative.BackAndroid;
       this.backListener = BackHandler.addEventListener('hardwareBackPress', () => this.onHardwareBackPress());
     }
   }
 
-  componentDidMount() {
-    this.didMount = true;
-  }
-
   componentWillUnmount() {
     if (this.backListener) {
       this.backListener.remove();

components/Button/Button.js

@@ -24,11 +24,11 @@ export default class Button extends TouchableOpacity {
     size: 'md',
   };
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.disabled != this.props.disabled) {
+  componentDidUpdate(prevProps) {
+    if (prevProps.disabled != this.props.disabled) {
       let opacity = Theme.btnDisabledOpacity;
-      if (!nextProps.disabled) {
-        let fs = StyleSheet.flatten(nextProps.style);
+      if (!this.props.disabled) {
+        let fs = StyleSheet.flatten(this.props.style);
         opacity = fs && (fs.opacity || fs.opacity === 0) ? fs.opacity : 1;
       }
       this.state.anim.setValue(opacity);

components/Carousel/Carousel.js

@@ -53,7 +53,7 @@ export default class Carousel extends Component {
       pageIndex: 0,
     };
     this.cardIndex = null;
-    this.initByProps(props);
+    this.initByProps();
     this.setupTimer();
   }
 
@@ -67,9 +67,17 @@ export default class Carousel extends Component {
     this.removeTimer();
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.initByProps(nextProps);
-    this.setupTimer();
+  componentDidUpdate(prevProps) {
+    let {children, carousel, direction, startIndex, cycle} = this.props;
+    let pageCount = children ? (children instanceof Array ? children.length : 1) : 0;
+    if (pageCount != this.pageCount
+      || carousel != prevProps.carousel
+      || direction != prevProps.direction
+      || startIndex != prevProps.startIndex
+      || cycle != prevProps.cycle) {
+      this.initByProps();
+      this.setupTimer();
+    }
   }
 
   //滚动到指定页
@@ -83,8 +91,8 @@ export default class Carousel extends Component {
   }
 
   //初始化轮播参数
-  initByProps(props) {
-    let {children, carousel, direction, startIndex, cycle} = props;
+  initByProps() {
+    let {children, carousel, direction, startIndex, cycle} = this.props;
 
     //页数
     this.pageCount = children ? (children instanceof Array ? children.length : 1) : 0;

components/Checkbox/Checkbox.js

@@ -40,16 +40,17 @@ export default class Checkbox extends TouchableOpacity {
     });
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.checked === true || nextProps.checked === false) {
-      if (nextProps.checked != this.state.checked) {
-        this.setState({checked: nextProps.checked});
+  componentDidUpdate(prevProps) {
+    let {checked, disabled} = this.props;
+    if (checked === true || checked === false) {
+      if (checked !== this.state.checked) {
+        this.setState({checked});
       }
     }
-    if (nextProps.disabled != this.props.disabled) {
+    if (disabled !== prevProps.disabled) {
       let opacity = Theme.cbDisabledOpacity;
-      if (!nextProps.disabled) {
-        let fs = StyleSheet.flatten(nextProps.style);
+      if (!disabled) {
+        let fs = StyleSheet.flatten(this.props.style);
         opacity = fs && (fs.opacity || fs.opacity === 0) ? fs.opacity : 1;
       }
       this.state.anim.setValue(opacity);

components/KeyboardSpace/KeyboardSpace.js

@@ -48,8 +48,8 @@ export default class KeyboardSpace extends Component {
     }
   }
 
-  componentWillUpdate(props, state) {
-    if (state.keyboardHeight !== this.state.keyboardHeight) {
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.keyboardHeight !== this.state.keyboardHeight) {
       LayoutAnimation.configureNext({
         duration: 500,
         create: {

components/NavigationBar/NavigationBar.js

@@ -61,9 +61,9 @@ export default class NavigationBar extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.hidden != this.props.hidden) {
-      this.checkBarHidden(nextProps.hidden, nextProps.animated);
+  componentDidUpdate(prevProps) {
+    if (prevProps.hidden != this.props.hidden) {
+      this.checkBarHidden();
     }
   }
 
@@ -101,7 +101,8 @@ export default class NavigationBar extends Component {
     return style;
   }
 
-  checkBarHidden(hidden, animated) {
+  checkBarHidden() {
+    let {hidden, animated} = this.props;
     let {barTop, barOpacity} = this.state;
     let barTopValue = hidden ? -this.barHeight : 0;
     let barOpacityValue = hidden ? 0 : 1;
@@ -121,7 +122,7 @@ export default class NavigationBar extends Component {
   onLayout(e) {
     if (e.nativeEvent.layout.height != this.barHeight) {
       this.barHeight = e.nativeEvent.layout.height;
-      this.checkBarHidden(this.props.hidden, this.props.animated);
+      this.checkBarHidden();
     }
     let {width} = Dimensions.get('window');
     if (width != this.screenWidth) {

components/Overlay/OverlayPopoverView.js

@@ -48,10 +48,10 @@ export default class OverlayPopoverView extends OverlayView {
     this.defaultDirectionInsets = 0;
   }
 
-  componentWillReceiveProps(nextProps) {
-    super.componentWillReceiveProps && super.componentWillReceiveProps(nextProps);
-    if (JSON.stringify(nextProps.fromBounds) != JSON.stringify(this.state.fromBounds)) {
-      this.setState({fromBounds: nextProps.fromBounds});
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    super.componentDidUpdate && super.componentDidUpdate(prevProps, prevState, snapshot);
+    if (JSON.stringify(this.props.fromBounds) !== JSON.stringify(this.state.fromBounds)) {
+      this.setState({fromBounds: this.props.fromBounds});
     }
   }
 

components/Overlay/OverlayView.js

@@ -44,7 +44,8 @@ export default class OverlayView extends Component {
     }
   }
 
-  componentWillMount() {
+  componentDidMount() {
+    this.appearAfterMount && this.appear();
     if (Platform.OS === 'android') {
       let BackHandler = ReactNative.BackHandler ? ReactNative.BackHandler : ReactNative.BackAndroid;
       this.backListener = BackHandler.addEventListener('hardwareBackPress', () => {
@@ -58,10 +59,6 @@ export default class OverlayView extends Component {
     }
   }
 
-  componentDidMount() {
-    this.appearAfterMount && this.appear();
-  }
-
   componentWillUnmount() {
     this.removeBackListener();
   }

components/Overlay/TopView.js

@@ -79,7 +79,7 @@ export default class TopView extends Component {
     return this.handlers.length > 0 ? this.handlers[this.handlers.length - 1] : this;
   }
 
-  componentWillMount() {
+  componentDidMount() {
     let {registerTopViewHandler} = this.context;
     if (registerTopViewHandler) {
       registerTopViewHandler(this);

components/Projector/Projector.js

@@ -21,30 +21,15 @@ export default class Projector extends Component {
     index: 0,
   };
 
-  constructor(props) {
-    super(props);
-    this.slideShowns = this.initSlideShowns(props.children);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    let nextSlideShowns = this.initSlideShowns(nextProps.children);
-    if (nextSlideShowns.length != this.slideShowns.length) {
-      this.slideShowns = nextSlideShowns;
-    }
-  }
-
-  initSlideShowns(children) {
-    if (children instanceof Array) return children.map(item => false);
-    else if (children) return [false];
-    return [];
-  }
-
   render() {
     let {index, slideStyle, children, ...others} = this.props;
     if (!(children instanceof Array)) {
       if (children) children = [children];
       else children = [];
     }
+    if (!this.slideShowns || this.slideShowns.length !== children.length) {
+      this.slideShowns = children.map(item => false);
+    }
     return (
       <View {...others}>
         {children.map((item, i) => {

components/SearchInput/SearchInput.js

@@ -35,8 +35,8 @@ export default class SearchInput extends Component {
     };
   }
 
-  componentWillUpdate(props, state) {
-    if (state.editing !== this.state.editing) {
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.editing !== this.state.editing) {
       LayoutAnimation.configureNext({
         duration: 500,
         create: {

components/SegmentedBar/SegmentedBar.js

@@ -49,21 +49,20 @@ export default class SegmentedBar extends Component {
     this._scrollViewWidth = 0;
   }
 
-  componentWillReceiveProps(nextProps) {
-    let nextItemsLayout = this.makeArray(this._itemsLayout, nextProps.children);
+  componentDidUpdate(prevProps) {
+    let nextItemsLayout = this.makeArray(this._itemsLayout, this.props.children);
     if (nextItemsLayout.length != this._itemsLayout.length) {
-      this._buttonsLayout = this.makeArray(this._buttonsLayout, nextProps.children);
+      this._buttonsLayout = this.makeArray(this._buttonsLayout, this.props.children);
       this._itemsLayout = nextItemsLayout;
-      this._itemsAddWidth = this.makeArray(this._itemsAddWidth, nextProps.children, 0);
+      this._itemsAddWidth = this.makeArray(this._itemsAddWidth, this.props.children, 0);
     }
-    if (nextProps.activeIndex || nextProps.activeIndex === 0) {
-      this._activeIndex = nextProps.activeIndex;
+    if (this.props.activeIndex || this.props.activeIndex === 0) {
+      this._activeIndex = this.props.activeIndex;
     }
     if (this._activeIndex >= nextItemsLayout.length) {
       this._activeIndex = nextItemsLayout.length - 1;
     }
-   this.props = nextProps;
-   this.updateIndicator();
+    this.updateIndicator();
   }
 
   get activeIndex() {

components/SegmentedView/SegmentedView.js

@@ -47,9 +47,9 @@ export default class SegmentedView extends Component {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.activeIndex != this.props.activeIndex && this.refs.carousel) {
-      this.refs.carousel.scrollToPage(nextProps.activeIndex);
+  componentDidUpdate(prevProps) {
+    if (prevProps.activeIndex != this.props.activeIndex && this.refs.carousel) {
+      this.refs.carousel.scrollToPage(this.props.activeIndex);
     }
   }
 

components/Wheel/Wheel.js

@@ -45,7 +45,7 @@ export default class Wheel extends Component {
     this.targetPositionValue = null;
   }
 
-  componentWillMount() {
+  componentDidMount() {
     if (!this.positionListenerId) {
       this.positionListenerId = this.currentPosition.addListener(e => this.handlePositionChange(e.value));
     }
@@ -164,7 +164,9 @@ export default class Wheel extends Component {
       let maskHeight = (height - holeHeight) / 2;
       this.hiddenOffset = Math.ceil(maskHeight / holeHeight) + this.constructor.preRenderCount;
     }
-    this.forceUpdate(() => this.currentPosition.setValue(this.index * holeHeight));
+    this.forceUpdate(() => {
+      this.currentPosition.setValue(this.index * holeHeight);
+    });
   }
 
   onLayout(e) {
@@ -198,7 +200,7 @@ export default class Wheel extends Component {
     if (typeof item === 'string' || typeof item === 'number') {
       item = <Text style={itemStyle}>{item}</Text>;
     }
-    
+
     return (
       <this.constructor.Item
         itemHeight={this.holeHeight}