React navigasyonunda geri düğmesini devre dışı bırakın

React native navigasyonu (react-navigation) StackNavigator kullanıyorum. uygulamanın tüm yaşam döngüsü boyunca Oturum Açma sayfasından başlar. Giriş ekranına dönerek bir geri seçeneğimin olmasını istemiyorum. Giriş ekranından sonra ekranda nasıl gizlenebileceğini bilen var mı? BTW, şunu kullanarak da giriş ekranında saklıyorum:

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  // ... other screens here
})

1) React-navigation v2 veya daha yeni sürümlerde geri düğmesinin kaybolmasını sağlamak için:

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

2) Gezinme yığınını temizlemek istiyorsanız:

Buradan gitmek istediğiniz ekranda olduğunuzu varsayarsak:

React-navigasyon v5 veya daha yeni bir sürümünü kullanıyorsanız navigation.resetveya kullanabilirsiniz 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' }],
});

Kaynak ve daha fazla bilgi burada: https://reactnavigation.org/docs/navigation-prop/#reset

Veya:

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Profile',
        params: { user: 'jane' },
      },
    ],
  })
);

Kaynak ve daha fazla bilgiyi burada bulabilirsiniz: https://reactnavigation.org/docs/navigation-actions/#reset

React-navigation'ün eski sürümleri için:

v2-v4 kullanımı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 kullanımıNavigationActions.reset

3) Android için BackHandler'ı kullanarak donanım geri düğmesini de devre dışı bırakmanız gerekecektir. :

http://reactnative.dev/docs/backhandler.html

veya kanca kullanmak istiyorsanız:

https://github.com/react-native-community/hooks#usebackhandler

aksi takdirde, navigasyon yığını boşsa android donanım geri düğmesine basıldığında uygulama kapanacaktır.

Kullandığınız düşündünüz mü this.props.navigation.replace( "HomeScreen" )yerine this.props.navigation.navigate( "HomeScreen" ).

Bu şekilde yığına hiçbir şey eklemiyorsunuz. Böylece HomeScreen, Android'de geri düğmesine basıldığında veya IOS'ta ekran sağa kaydırıldığında geri dönmek için hiçbir şeyi sallamaz.

Daha fazla bilgi Belgeleri kontrol edin . Ve tabii ki geri düğmesini ayarlayarak gizleyebilirsiniz headerLeft: null.navigationOptions

Biz false ayarlamanız gerekir gesturesEnabledberaber headerLeftüzere null. Çünkü ekranı kaydırarak da geri dönebiliriz.

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

Geri düğmesini kullanarak gizleyebilirsiniz left:null, ancak android cihazlar için kullanıcı geri düğmesine bastığında yine de geri dönebilir. Navigasyon durumunu sıfırlamanız ve düğmeyi ile gizlemeniz gerekir.left:null

Gezinme durumunu sıfırlamak için gereken belgeler şunlardır:
https://reactnavigation.org/docs/navigation-actions#reset

Bu çözüm işe yarıyor react-navigator 1.0.0-beta.7, ancak left:nullartık en son sürüm için çalışmıyor.

React yerelinden BackHandler'ı kullanmak benim için çalıştı. Bu satırı ComponentWillMount'a eklemeniz yeterlidir:

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

android cihazda geri düğmesini devre dışı bırakacaktır.

kendim buldum;) ekleyerek:

  left: null,

varsayılan geri düğmesini devre dışı bırakın.

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

react-navigasyon sürümleri> = 1.0.0-beta.9

navigationOptions:  {
   headerLeft: null
}

Bu durumu ele almak için en iyi seçenek, React navigasyonu tarafından sağlanan SwitchNavigator'ı kullanmaktır. . SwitchNavigator'ın amacı, bir seferde yalnızca bir ekran göstermektir. Varsayılan olarak, geri eylemleri işlemez ve siz geçiş yaptığınızda rotaları varsayılan durumlarına sıfırlar. Bu, kimlik doğrulama akışında ihtiyaç duyulan tam davranıştır.

Bu, onu uygulamanın tipik bir yoludur.

1. 2 yığın gezgini oluşturun: Biri kimlik doğrulama için (oturum açma, kaydolma, şifremi unuttum vb.) Ve ana APP için diğeri
2. Anahtar gezgininden hangi rotayı göstermek istediğinizi kontrol edeceğiniz bir ekran oluşturun (Bunu genellikle açılış ekranında bir belirtecin Async depolamada depolanıp depolanmadığını kontrol ederek kontrol ederim)

İşte yukarıdaki ifadelerin bir kod uygulaması

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from "./homeScreenPath" 
import OtherScreen from "./otherScreenPath"
import SignInScreen from "./SignInScreenPath" 
import SplashScreen from "./SplashScreenPath"

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

const AuthStack = createStackNavigator({ SignIn: SignInScreen });


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

Şimdi SplashScreen'de belirteci kontrol edecek ve buna göre gezineceksiniz

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

class SplashScreen extends React.Component {
  componentDidMount() {
    this.checkIfLogin();
  }

  // Fetch the token from storage then navigate to our appropriate place
  checkIfLogin = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this splash
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    return (
      <View>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

SwitchNavigator'da rotaları değiştirdiğinizde, eski rotayı otomatik olarak kaldırır ve bu nedenle geri düğmesine basarsanız sizi artık kimlik doğrulama / oturum açma ekranlarına götürmez.

HeaderLeft'i null olarak ayarlayarak düzeltebiliriz

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

En son sürüm React Navigation 5 ile Typescript:

<Stack.Screen
    name={Routes.Consultations}
    component={Consultations}
    options={{headerLeft: () => null}}
  />

SwitchNavigator Bunu gerçekleştirmek için yol olacaktır. SwitchNavigatorvarsayılan yolları sıfırlar ve navigateeylem başlatıldığında kimlik doğrulama ekranının bağlantısını keser.

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',
  }
));

Kullanıcı SignInScreen'e gidip kimlik bilgilerini girdikten sonra,

this.props.navigation.navigate('App');

Basitçe yapmak

headerLeft: null

bu yanıtı okuduğunuzda kullanımdan kaldırılmış olabilir. Aşağıdakileri kullanmalısınız

   navigationOptions = {
        headerTitle : "Title",
        headerLeft : () => {},
    }

ReactNavigation v 5.0 - Yığın seçeneği:

options={{
headerLeft: () => { 
 return <></>; 
}
}}

basit olduğunu düşünüyorum, sadece ekleyin headerLeft : null, react-native cli kullanıyorum, bu yüzden örnek şu:

static navigationOptions = {
    headerLeft : null
};

React Navigation'ın en son sürümü için, bazı durumlarda null kullansanız bile, yine de "geri" yazılı olarak görünebilir!

Bunun için ana app.js'nizde ekran adınızın altına gidin veya sadece sınıf dosyanıza gidin ve şunu ekleyin: -

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

En Son Sürümde (v2) çalışır headerLeft:null. Eğer kontrolör yıllarda ekleyebilir navigationOptionsolarak feryat

static navigationOptions = {
    headerLeft: null,
};

React-navigasyon sürüm 4.x için

navigationOptions: () => ({
      title: 'Configuration',
      headerBackTitle: null,
      headerLayoutPreset:'center',
      headerLeft: null
    })

headerLeft: null

Bu, en son react yerel sürümünde çalışmaz

Olmalı:

navigationOptions = {
 headerLeft:()=>{},
}

Typescript için:

navigationOptions = {
 headerLeft:()=>{return null},
}

React-navigasyon 5.x sürümlerinde, bunu şu şekilde yapabilirsiniz:

import { CommonActions } from '@react-navigation/native';

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Profile',
        params: { user: 'jane' },
      },
    ],
  })
);

Daha fazlasını buradan okuyabilirsiniz .