onsenUI Navigatorとは
onsenUIの提供する画面遷移を提供してくれるコンポーネントである。
今回はReact用のonsenUIについて記載する。
詳しくはこちら
https://ja.onsen.io/v2/api/react/Navigator.html#method-pushPage
問題
以下の画面遷移のように3回ほどpushPage()
した後に、resetPage()
でページAに遷移すると、
[ページA]に遷移するが、画面が真っ白になる。
画面遷移: 【ページA】 -(push)- > 【ページB】 -(push)- > 【ページB】 -(reset)- > 【ページA】
pushPage() {
this.props.navigator.pushPage({ component: PageB });
}
resetPage() {
this.props.navigator.resetPage({ component: PageA });
}
状況
真っ白の画面、ページAのstyleにdisplay: none;
があった。
解決
ページAからページBへの画面遷移にresetPage()
を利用した。
画面遷移: 【ページA】 -(reset)- > 【ページB】 -(push)- > 【ページB】 -(reset)- > 【ページA】
仮説
*ここからは正確な情報ではないかもしれません。
resetPage()
の遷移先と最初のページが同じだとうまくいかないようだ。
おそらく、pushするタイミングで、非表示の画面にdisplay: none;
をかけている。
resetPage()
の遷移先と最初のページが同じだと、reactが差分なしで、
最初の画面の再レンダリングをしていないかもしれない?
間違っていたらご指摘いただけると幸いです。