LoginSignup
0
0

More than 3 years have passed since last update.

onsenUI NavigatorのresetPage()で画面遷移する画面が真っ白になる。

Last updated at Posted at 2020-07-17

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が差分なしで、
最初の画面の再レンダリングをしていないかもしれない?

間違っていたらご指摘いただけると幸いです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0