0

Index、BluePage、GreenPageの3つのコンポーネントを持つ単一ページアプリケーションを作成しようとしています

React と React ルーターを使用して切り替えようとしています。レイアウトは次のとおりです。

このビューはスライド ページのようなもので、次の図のように視覚化できます。

ここに画像の説明を入力

これらのトランジションを行うために、現在 ReactCSSTransitionGroup と CSS クラスを使用していますが、ページがアニメーション化する方向が以前に表示されていたページに依存するため、難しくなっています。

たとえば、BluePage がビューに表示されていて、ユーザーが「戻る」ボタンを押した場合、インデックスは右からビューに移動する必要があります。

一方、GreenPage が最初に表示されていた場合、Index は左側から表示されるはずです。

質問

  • コンポーネントを適切にアニメーション化できるように、React Router を使用して既存のパスを次のコンポーネントに送信するにはどうすればよいですか?

  • ReactCSSTransitionGroup を引き続き使用する必要がありますか、それとも componentWillMount および componentWillUnmount コールバックでアニメーションを処理する必要がありますか?

    • もしそうなら、最初のレンダリング作業の後に CSS クラスをオブジェクトに追加するとどうなりますか?

これらの質問が初心者のように思われる場合は、お詫び申し上げます。私はまだ ReactJS の初心者です。助けてくれてありがとう！

明確化が必要な場合は、お知らせください。

4

2 に答える 2

0

確認することをお勧めしますreact-swipeable-views。

このコンポーネントでは、すべてのビュー (コンポーネント) をコンポーネントの子として追加するだけですSwipeableView。現在アクティブなビューは、indexの propによって定義され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 ではないため、Web サイトで動作するように作成されているため、スワイプする必要はありません。私は自分のプロジェクトの 1 つでそれを使用します。これがそのGIFです。

于 2016-09-08T04:55:33.983 に答える