[解決済み] リアクトナビゲーションで戻るボタンを無効にする
質問
react native navigation (react-navigation) StackNavigatorを使用しています。 アプリのライフサイクル全体を通して、ログインページからスタートします。私は、ログイン画面に戻るオプションを持ちたくありません。ログイン画面の後の画面に非表示にする方法をご存知の方はいらっしゃいませんか? ちなみに、ログイン画面でも、使って隠しています。
const MainStack = StackNavigator({
Login: {
screen: Login,
navigationOptions: {
title: "Login",
header: {
visible: false,
},
},
},
// ... other screens here
})
どのように解決するのですか?
1) react-navigation v2以降で戻るボタンを消すには。
v2-v4です。
navigationOptions: {
title: 'MyScreen',
headerLeft: null
}
v5 :
{
navigationOptions: {
title: 'MyScreen',
headerLeft: ()=> null, // Note: using just `null` instead of a function should also work but could trigger a TS error
}
2) ナビゲーションスタックをきれいにしたい場合。
ナビゲーションしたい元の画面にいると仮定して。
react-navigationのバージョンv5以降を使用している場合。
を使用することができます。
navigation.reset
または
CommonActions.reset
:
// Replace current navigation state with a new one,
// index value will be the current active route:
navigation.reset({
index: 0,
routes: [{ name: 'Profile' }],
});
ソースと詳細はこちら。 https://reactnavigation.org/docs/navigation-prop/#reset
または
navigation.dispatch(
CommonActions.reset({
index: 1,
routes: [
{ name: 'Home' },
{
name: 'Profile',
params: { user: 'jane' },
},
],
})
);
ソースと詳細はこちら。 https://reactnavigation.org/docs/navigation-actions/#reset
react-navigationの古いバージョン用。
v2-v4
使用
StackActions.reset(...)
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0, // <-- currect active route from actions array
actions: [
NavigationActions.navigate({ routeName: 'myRouteWithDisabledBackFunctionality' }),
],
});
this.props.navigation.dispatch(resetAction);
v1
使用
NavigationActions.reset
3) Androidの場合、BackHandlerを使用してハードウェアバックボタンを無効にする必要があります。 :
http://reactnative.dev/docs/backhandler.html
またはフックを使用する場合。
https://github.com/react-native-community/hooks#usebackhandler
ナビゲーションスタックが空の場合、アンドロイドハードウェアのバックボタンが押されると、アプリは終了します。
追加情報: 以下のコメントを追加して、この回答を v5 用に更新するのを助けてくれたユーザーに感謝します。
関連
-
[解決済み] エラー: 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み] ReactJS: Warning: setState(...): 既存の状態遷移の間に更新することはできません
-
[解決済み] Webpack + Babelです。プリセット "es2015 "がディレクトリに相対して見つからなかった
-
[解決済み] react router dom v4でwebpack dev serverを構成する方法は?
-
[解決済み] React の open mailto E-Mail クライアントの onClick で textarea から本文を取得する。
-
[解決済み] componentWillReceiveProps は名称が変更されました。
-
[解決済み] react-navigation v5を使ったreact-nativeアプリのAppNavigatorの構文を更新する。
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] React NativeとReactの違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Reactでclsxを使用する方法
-
[解決済み] error 'document' is not defined : eslint / React
-
[解決済み] material-ui-pickers KeyboardDatePicker をモーメントで使用するには?
-
[解決済み] react jsでウィンドウを開くイベントを処理するにはどうすればよいですか?
-
[解決済み] reactstrapのドロップダウンで選択されたアイテムを設定する方法は?
-
[解決済み] React - 予想外のトークン、予想外の;
-
[解決済み] カスタマイズ素材UI チェックした場合としない場合の切り替え
-
[解決済み] react.jsでng-ifに相当するものは何ですか?
-
[解決済み] React Hooksの「exhaustive-deps」lintルールを理解する
-
[解決済み] create-react-appビルドスクリプトを実行する際に、ビルド.env変数を設定するには?