react初心者です。
onsenUiを使ってページ遷移をさせているのですが、公式ドキュメントが理解できずうまく遷移できません。
Navigatorのコードはここにあります
したいのは
ページAのリンクをクリック
→ページBに行く
ページBのリンクをクリック
→ページCに行く
ページCのリンクをクリック
→ページAに戻る
わからないなりに書いてみたコードの一部がこんな感じです
javascript
1 resetPage(){ 2 this.props.navigator.resetPage({ 3 component:PageA, 4 },this.props.options={animation:'slide'}) 5 } 6/////////////////// 7..... 8//////////////////// 9<Button onClick={this.resetPage.bind(this)}>戻る</Button> 10
これはPageCコンポーネントの一部です。
Buttonをクリックすると一応ページAに行くのですが、アニメーションが
「新しいページが右から左へ流れる(次のページに進むアニメーション)」ものになっています。
実際は「左から右に流れる(前のページに戻るアニメーション)」にしたいのですが、どうも上手く行きません。
思いつく対策は以下の様なものなのですが、どれが適切なのかわからず、まだ実装の方法も思いつかない状況です。(上のコードを実装するのに2日くらいかかりました)
・アニメーションを編集する
・一瞬でpopPage()を2回実行する
・別の方法でページスタックを取り除く
ここで行き詰まってしまい、どうにも前に進むことができません。
どなたかご教示願えませんでしょうか。
【追記】
少し探しているとこんな同じようなことを言っているようなサイトを見つけました。
onsen ui - replacePageで画面遷移する際のアニメーションの方向を変えたい - スタック・オーバーフロー
ここにアニメーションの変更について記されているのですが、ここにかかれているコードはAngularのように見えます。
これはReactで書き直しする必要があるのでしょうか。
また、書くとしたらその場所はどこになるのでしょうか。
何かご存じの方がいらっしゃれば教えて頂けるとうれしいです
よろしくお願いします。
あなたの回答
tips
プレビュー