React：如何像iOS应用程序商店一样进行转换？

Question

我正在尝试模仿iOS应用商店卡转换，如下所示：https://www.youtube.com/watch?v=p7rHQSoKCVg

这已经模仿了Swift中的各种repos，但我需要一个React的解决方案。到目前为止，我们所想做的就是让用户保持在同一个（主页）屏幕上，但显示一个复制项目屏幕的视图 - 我需要实际转换到一个单独的新项目屏幕。并保留动画 - 这里是React转换的新内容，需要知道这是否已完成或如何在此重新配置..

我们拥有什么：

 shouldComponentUpdate(nextProps, nextState) {
    if (!_.isEqual(nextState, this.state)) {
      return true;
    }
    if (!_.isEqual(nextProps, this.props)) {
      const a = nextProps;
      const b = this.props;
      const propDiff = _.reduce(
        a,
        function(result, value, key) {
          return _.isEqual(value, b[key]) ? result : result.concat(key);
        },
        []
      );
      const diffNextProps = {};
      propDiff.map(prop => (diffNextProps[prop] = nextProps[prop]));

      if (!this.state.isGrown && diffNextProps.items) {
        return false;
      }
    }
    return (
      nextProps.currentScreen === 'FeedItemCard' ||
      nextProps.currentScreen === 'Home'
    );
  }

  getItemData() {
    const { getItemScreenData, item } = this.props;
    // NOTE: this is a check for when coming back from editImage

    // TODO: create call for speicific item URL
    getItemScreenData(item._id).then(item => {
      this.getComponentGroups([
        item.originalItem ? item.originalItem : item._id
      ]);
    });
  }

  getComponentGroups(parentsItems: string[]) {
    const { getMultipleItems, syncItemComponentGroups } = this.props;
    getMultipleItems(parentsItems).then(items => {
      if (items) {
        syncItemComponentGroups(items);
      }
    });
  }     

animateGrow() {
        this.props.addScreenToStack(ScreenNames.FEED_ITEM_CARD);
        this.getItemData();
        this.props.selectItem(this.props.item, this.props.index);

        const animationStatus = true;
        this.props.updateFeedAnimationStatus(animationStatus);

        this.state.animatedValue.setValue(0);
        this.setState({
          firstLoad: false,
          imageSize: width,
          borderRadius: 0,
          imageTextPadding: 20,
          imageTextTopPadding: height > 800 ? 50 : 33,
          imageTextBottomPadding: 0,
          mainView: {
            backgroundColor: colors.WHITE,
            top: 0,
            zIndex: 10000
          },
          isGrown: true,
          isShrunk: false,
          isBouncingOnPress: false
        });

        Animated.spring(this.state.animatedValue, {
          toValue: 1,
          friction: 6,
          easing: Easing.bounce()
        }).start(() => {
          this.state.animatedValue.setValue(1);
          this.props.setHomeAction(() => this.animateShrink());
        });
      }

      animateShrink() {
        this.props.addScreenToStack(ScreenNames.HOME);
        const animationStatus = false;
        this.props.updateFeedAnimationStatus(animationStatus);

        this.state.animatedValue.setValue(0);
        this.setState({
          imageSize: Math.round(width) - 40,
          borderRadius: 15,
          imageTextPadding: 40,
          imageTextTopPadding: 20,
          imageTextBottomPadding: 40,
          mainView: {},
          isShrunk: true,
          isGrown: false
        });
        Animated.spring(this.state.animatedValue, {
          toValue: 1,
          speed: 0.5,
          easing: Easing.bounce()
        }).start(() => {
          this.state.animatedValue.setValue(1);
          this.setState({ isShrunk: false, firstLoad: true });
        });
      }

      bounceShrink() {
        this.state.animatedValue.setValue(0);
        this.setState({
          isBouncingOnPress: true
        });
        Animated.spring(this.state.animatedValue, {
          toValue: 1,
          friction: 8,
          easing: Easing.bounce()
        }).start(() => {
          this.state.animatedValue.setValue(1);
        });
      }

      bounceGrow() {
        this.state.animatedValue.setValue(0);
        this.setState({
          isBouncingOnRelease: true,
          isBouncingOnPress: false
        });
        Animated.spring(this.state.animatedValue, {
          toValue: 1,
          friction: 8,
          easing: Easing.bounce()
        }).start(() => {
          this.state.animatedValue.setValue(1);
          this.setState({
            isBouncingOnRelease: false
          });
        });
      }

      doubleTapActionFeedCard() {
        if (singleTapTimeout) {
          clearTimeout(singleTapTimeout);
          singleTapTimeout = false;
          if (!this.props.isAuthUser) {
            this.props.toggleLikeStatus(
              this.props.item._id,
              this.props.item.liked || false
            );
          }
        } else {
          singleTapTimeout = setTimeout(() => {
            if (this.props.user && !this.state.isGrown) {
              this.animateGrow();
            }
            singleTapTimeout = false;
          }, 150);
        }
      }

      navToItem(item: Object) {
        this.props.navigation.navigate('Item', {
          item: item,
          id: item._id,
          name: item.name,
          animateShrink: this.animateShrink
        });
      }

      onEditItem(status) {
        this.props.onEditItem(status);
      }

这不正确。我们如何重新创建iOS应用商店转换 React native？