0

我正在尝试制作一个包含 3 个组件的单页应用程序：Index、BluePage 和 GreenPage

我正在尝试使用 React 和 React 路由器来切换它们。布局如下：

这个视图应该像一个滑动页面，可以更好地可视化，如下图所示：

在此处输入图像描述

为了进行这些转换，我目前正在使用 ReactCSSTransitionGroup 和 CSS 类，但是这变得越来越困难，因为页面必须动画的方向取决于之前查看的页面。

例如，如果 BluePage 在视图中，并且用户按下了“返回”按钮，则索引应该从右侧移到视图中。

另一方面，如果 GreenPage 最初在视图中，则索引应该从左侧移动到视图中。

问题

  • 如何使用 React Router 将现有路径发送到下一个组件，以便我可以正确地为组件设置动画？

  • 我应该继续使用 ReactCSSTransitionGroup 还是应该在 componentWillMount 和 componentWillUnmount 回调中处理动画？

    • 如果是这样，如何在初始渲染后向对象添加 CSS 类？

如果这些问题看起来有些新手，我深表歉意——我仍然是 ReactJS 的初学者。感谢所有的帮助！

如果需要任何澄清，请告诉我。

4

2 回答 2

0

我建议你使用swiper.js。为什么？

  • 高性能（桌面、移动）
  • 不需要jquery
  • 巨大的api，为您的用例提供非常有用的功能
    • 以编程方式更改幻灯片：swiper.slideTo(2)或swiper.nextSlide()）
    • Hash/History Navigation: 哈希和幻灯片之间的同步
    • 您可以禁用触摸手势
    • ETC..

设置

npm install swiper --save

进口

const Swiper = require('swiper');

or

import Swiper from 'swiper';

用法

参见示例

于 2017-04-25T19:05:54.340 回答
0

我建议你检查一下react-swipeable-views。

在此组件中，您只需将所有视图（组件）添加为组件的子SwipeableView组件。index当前活动视图由SwipeableView. 您使用按钮切换视图，您只需要在主组件（App例如）中创建一个状态并在onClick处理程序中更新此状态。它看起来像这样：

class MainComponent extends Component {
  state = {
    index: 0,
  }

  onBlueButtonClick() {
    this.setState({ index: 1 });
  }

  render() {
    return (
      <div>
        <div onClick={() => this.onBlueButtonClick()}>Click me!<div />
        <SwipeableView index={this.state.index}>
          <BlueView />
          <GreenView />
          <RedView />
        <SwipeableView />
      </div>
    );
  }
}

希望能帮助到你！;)

编辑：我在示例中添加了一个按钮来说明在没有滑动效果时如何使用此组件。这是一个 React 组件而不是 React Native，因此它可以在网站上运行，因此无需滑动。我在我的一个项目中使用它。这是它的GIF。

于 2016-09-08T04:55:33.983 回答