ExpoでBackボタンを表示させない方法(ReactNative)

Expoで画面遷移を実装したときに、Backボタンが表示されるかと思います。

ただ、前の画面には戻ってほしくない時もあると思います。

今回は、Backボタンを非表示にする方法を解説していきます。

元のコード

次の画面に遷移するときにReactNavigation を使用していれば、

次のように書いているところがあるかと思います。

onPress={() => { navigation.navigate('ScreenName');}}

この部分を書き換えることで、

次の画面に遷移したときにBackボタンを消すことができます。

Backボタンを非表示にする方法

結論、onPressの中身の関数に以下にするだけです。

onPress={() => navigation.reset({
          index: 0,
          routes: [{ name: 'Matching_Frame'}]
        })}

resetを指定することで、画面が重なるのを解除できます。

次の画面が最初の画面になるので、戻る画面がなくなるということです。

そのため、戻る画面がないので、「Backボタンが表示されなくなる」という理屈になっています。

まとめ

今回は、Backボタンを表示させないようにする方法を解説していきました。

最初の説明画面などに使えばさらに使いやすくなりますので、活用してみてください！

ではまた。