react-native-router-fluxでアニメーションなし遷移させてみる

最近、react nativeのお勉強中。
気付けばゴールデンウィークも終わりました。
暑かった。暑かったのに、そのあとは寒かった。そして、また暑くなった。笑
体調崩さないよう気を付けましょうね。

てことで、お勉強中にreact-native-router-fluxでアニメーションせずに遷移させようとして、
うーん、てなった話ですw

react-native-router-fluxの使い方や詳細は割愛します。
以下に良記事がありますので、ご参考ください。
https://qiita.com/YutamaKotaro/items/ab52b6ba664d88a87bd9

まず、普通に実装すると、スライドして遷移するんですね。
単純にこんな感じで。
App.js

<Scene key="root">
  <Scene key="PageA" component={PageA} />
  <Scene key="PageB" component={PageB} />
</Scene>

遷移させる時は、例えば、
pageA.js

<Button onPress={Actions.PageB} />

こんな感じ。

で、その遷移する際に、スライドなどアニメーションなしで遷移させたいわけです。
調べてみると、type: ActionConst.REPLACEの指定で、出来ると見つけました。
こんな感じ。

<Button onPress={Actions.pageB({ type: ActionConst.REPLACE })} />

が、エラー。

TypeError: Cannot read property 'map' of undefined

ま、すんなりいかないのはご愛嬌。
で、エラー内容で検索すると、以下の記事に、
react-native-router-fluxのバージョンがv4.0.0-beta27だと動くよ、ってあったので、
https://github.com/aksonov/react-native-router-flux/issues/2804

package.jsonとpackage-lock.jsonの該当箇所のバージョンを変更して、(最初は28でした。
node_modulesフォルダを削除して、npm installを実行。
(react-native-router-fluxフォルダの削除のみでも良いかもです。

これで、ヨシヨシ、と思ったが、しかし、やはり同じくエラーになりました。

TypeError: Cannot read property 'map' of undefined

もう1度調べていくと、下のような記事を発見。
https://github.com/aksonov/react-native-router-flux/issues/2104

type=’reset’で動くとあったので、Sceneのpropsに指定。

<Scene key="PageA" type='reset' component={PageA} />
<Scene key="PageB" type='reset' component={PageB} />

これで、ようやく、アニメーションなしで動きました!

恐らくバージョンや環境の問題だとは思うのですが、
とりあえずは、期待した動作になったのでOKとしました。

てな感じで、暑さにも寒さにも負けず、頑張りましょうー!!
お疲れ様でしたー!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です