web-dev-qa-db-ja.com

反応ナビゲーションの戻るボタンを無効にする

反応ネイティブナビゲーション（反応ナビゲーション）StackNavigatorを使用しています。アプリのライフサイクル全体のログインページから開始します。ログイン画面に戻るための戻るオプションは必要ありません。ログイン画面の後に画面上で非表示にする方法を知っている人はいますか？ところで、私はまたログイン画面でそれを非表示にしています：

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  // ... other screens here
})
reactjsreact-nativenavigationreact-navigation
50
EyalS

反応ナビゲーションバージョンv1> = 1.0.0-beta.9の場合、戻るボタンを非表示にします。

navigationOptions:  {
    title: 'MyScreen',
    headerLeft: null
}

ナビゲーションスタックもきれいにしたい場合は、次のようなことができます（ナビゲーション元の画面にいると仮定します）。

import { NavigationActions } from 'react-navigation';

関数を使用して、すべての戻る機能を無効にするターゲットルートに移動します。

resetNavigation(targetRoute) {
  const resetAction = NavigationActions.reset({
    index: 0,
    actions: [
      NavigationActions.navigate({ routeName: targetRoute }),
    ],
  });
  this.props.navigation.dispatch(resetAction);
}

ターゲットルートに移動するときにthis.resetNavigation('myRouteWithDisabledBackFunctionality')を呼び出します

反応ナビゲーションバージョンv2の場合、NavigationActions.resetの代わりにStackAction.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);

詳細はこちら： https://reactnavigation.org/docs/en/stack-actions.html

114
Florin Dobre

left:nullを使用して戻るボタンを非表示にできますが、Androidデバイスの場合、ユーザーが[戻る]ボタンを押したときに戻ることができます。ナビゲーション状態をリセットし、left:nullでボタンを非表示にする必要があります

ナビゲーション状態をリセットするためのドキュメントを次に示します。 https://reactnavigation.org/docs/navigators/navigation-actions#Reset

このソリューションはreact-navigator 1.0.0-beta.7で動作しますが、left:nullは最新バージョンでは動作しません。

16
Echo7

this.props.navigation.replace( "HomeScreen" )の代わりにthis.props.navigation.navigate( "HomeScreen" )を使用することを検討しましたか。

この方法では、スタックに何も追加しません。そのため、Androidで戻るボタンが押された場合、またはIOSで画面が右にスワイプされた場合、HomeScreenは戻るべきものを振りません。

詳細については、 ドキュメント を確認してください。そしてもちろん、navigationOptionsでheaderLeft: nullを設定することで、戻るボタンを非表示にすることができます

10
Tarik Chakur

gesturesEnabledをheaderLeftとともにnullにfalseを設定する必要があります。画面をスワイプすることでも戻ることができるからです。

navigationOptions:  {
        title: 'Title',
        headerLeft: null,
        gesturesEnabled: false,
}
7
Gavidi Harikrishna

自分で見つけた;）追加：

  left: null,

デフォルトの戻るボタンを無効にします。

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  FirstPage: {
    screen: FirstPage,
    navigationOptions: {
      title: "FirstPage",
      header: {
        left: null,
      }
    },
  },
3
EyalS

react-navigationバージョン> = 1.0.0-beta.9

navigationOptions:  {
headerLeft: null}
3
Vaibhav Bacchav

反応ネイティブからBackHandlerを使用して私のために働いた。 ComponentWillMountに次の行を含めるだけです。

BackHandler.addEventListener('hardwareBackPress', function() {return true})

Androidデバイスの戻るボタンを無効にします。

2
OsamaD

SwitchNavigator がこれを達成する方法です。 SwitchNavigatorは、navigateアクションが呼び出されたときにデフォルトのルートをリセットし、認証画面をアンマウントします。

import { createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

ユーザーがSignInScreenに移動して資格情報を入力したら、次に呼び出します

this.props.navigation.navigate('App');
0
Scott Davis

最新バージョン（v2）ではheaderLeft:nullが機能します。コントローラーのnavigationOptionsを次のように追加できます

static navigationOptions = {
    headerLeft: null,
  };
0
tarikul05

headerLeft : nullを追加するだけで簡単だと思う、私は反応ネイティブcliを使用しているので、これは例です：

static navigationOptions = {
        headerLeft : null
    };
0
Cevin Ways

HeaderLeftをnullに設定することで修正できます

static navigationOptions =({navigation}) => {
    return {
        title: 'Rechercher une ville',
        headerLeft: null,
    }  
}
0
Klaudia Brysiewicz

React Navigationの最新バージョンでは、場合によってはnullを使用しても、「戻る」と表示される場合があります。

これをmain app.jsでスクリーン名の下に移動するか、単にclass fileに移動して以下を追加します-

 static navigationOptions = {
        headerTitle:'Disable back Options',
        headerTitleStyle: {color:'white'},
        headerStyle: {backgroundColor:'black'},
        headerTintColor: 'red',
        headerForceInset: {vertical: 'never'},
        headerLeft: " "
      }
0
Rishav Kumar