最近、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としました。
てな感じで、暑さにも寒さにも負けず、頑張りましょうー!!
お疲れ様でしたー!