2021年7月2日金曜日

react-navigationでnestした特定のスクリーンでDrawerのgestureを一時的にオフにしたい

  • このエントリーをはてなブックマークに追加

react-navigationを使って様々な組み方をすると思うんだけど、よくあるのがネストして複雑なnavigationを作るという感じ。
stackNavigatorをネストしまくるとか、TabNavigatorの中にStackNavigatorとか、DrawerNavigatorの中にStackNavigatorとか。

で、今回はDrawerNavigatorについて。
スワイプしたらDrawerが出てきてしまうので、スワイプで戻りたい時にも出てきてしまう。
ということで今日はDrawerのスワイプを一時的にオフにするお話をば。

useEffect(() => {
  const parent = navigation.dangerouslyGetParent();

  parent?.setOptions({ gestureEnabled: false });

  return () => parent?.setOptions({ gestureEnabled: true });
}, []);

こんな感じ。
Screenを開いた際に親のgestureEnabledをfalseにしてあげる的な。
もちろんunMountする際に復活させるのを忘れずに。

昔のバージョンだったらlockModeっていうオプションがあったけどv5からは廃止されてるわけで。
意外とこれに関する情報がなくて困った的なみたいな。

0 件のコメント:

コメントを投稿

Adsense