Відключити кнопку "Назад" у навігації на реакцію

Я використовую рідну навігаційну реакцію (response-navigation) StackNavigator. він починається зі сторінки входу протягом усього життєвого циклу програми. Я не хочу мати опцію повернення, повертаючись на екран входу. Хтось знає, як його можна приховати на екрані після екрана входу? До речі, я також приховую це на екрані входу, використовуючи:

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

1) Щоб кнопка "Назад" зникла в React-Navigation v2 або новішій версії:

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

2) Якщо ви хочете очистити стек навігації:

Припускаючи, що ви знаходитесь на екрані, з якого ви хочете здійснити навігацію:

Якщо ви використовуєте реакцію навігації версії 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

інакше програма закриється при натисканні кнопки `` Назад '' апаратного забезпечення Android, якщо стек навігації порожній.

Ви думали про використання this.props.navigation.replace( "HomeScreen" )замість this.props.navigation.navigate( "HomeScreen" ).

Таким чином ви нічого не додаєте в стек. отже, HomeScreen не буде махати нічим, до чого повертатись, якщо в Android натиснути кнопку "Назад" або в IOS провести пальцем праворуч.

Більше інформації див. У Документації . І, звичайно , ви можете приховати кнопку назад, встановивши headerLeft: nullвnavigationOptions

Ви можете приховати кнопку "Назад" left:null, але для пристроїв Android вона все одно може повернутися назад, коли користувач натискає кнопку "Назад". Вам потрібно скинути стан навігації і сховати кнопку за допомогоюleft:null

Ось документи для скидання стану навігації: https://reactnavigation.org/docs/navigators/navigation-actions#Reset

Це рішення працює react-navigator 1.0.0-beta.7, проте left:nullбільше не працює для останньої версії.

Нам потрібно встановити значення false gesturesEnabledпоряд із headerLeftto null. Тому що ми можемо повернутися назад, також проводячи пальцем по екрану.

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

використання BackHandler від реактивного рідного спрацювало для мене. Просто включіть цей рядок у свій ComponentWillMount:

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

він вимкне кнопку "Назад" на пристрої Android.

знайшов сам;) додавши:

  left: null,

вимкнути кнопку "Назад" за замовчуванням.

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

версія навігації-реакції> = 1.0.0-beta.9

navigationOptions:  {
   headerLeft: null
}

Найкращим варіантом для вирішення цієї ситуації є використання SwitchNavigator, що надається навігацією React . Призначення SwitchNavigator - показувати лише один екран за раз. За замовчуванням він не обробляє зворотних дій, і скидає маршрути до стану за замовчуванням, коли ви відключаєтеся. Це саме та поведінка, яка необхідна в процесі аутентифікації.

Це типовий спосіб його реалізації.

1. Створіть 2 навігатори стека: один для автентифікації (вхід, реєстрація, забутий пароль тощо) та інший для основного додатка
2. Створіть екран, на якому ви будете перевіряти, який маршрут із навігатора перемикачів ви хочете показати (я зазвичай перевіряю це на заставці, перевіряючи, чи зберігається маркер в сховищі Async)

Ось кодова реалізація вищезазначених тверджень

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

Тепер у SplashScreen ви перевірите маркер і перейдете відповідно

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, він автоматично видаляє старий маршрут, а отже, якщо ви натиснете кнопку назад, він більше не перенесе вас на екрани автентифікації / входу

Ми можемо це виправити, встановивши для headerLeft значення null

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

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

Просто робити

headerLeft: null

можливо, застаріє до моменту прочитання цієї відповіді. Ви повинні використовувати наступне

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

Для останньої версії React Navigation 5 з машинописом:

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

ReactNavigation v 5.0 - Опція стеку:

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

я думаю, що це просто, просто додайте headerLeft : null, я використовую реакційну кліку, тому це приклад:

static navigationOptions = {
    headerLeft : null
};

Для останньої версії React Navigation, навіть якщо ви використовуєте значення null, в деяких випадках воно все одно може відображатись "back" написано!

Виконайте це у своєму головному app.js під своїм іменем або просто перейдіть до файлу вашого класу та додайте: -

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

В останній версії (v2) працює headerLeft:null. Ви можете додати контролер navigationOptionsяк нижче

static navigationOptions = {
    headerLeft: null,
};

Для реакційно-навігаційної версії 4.x

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

headerLeft: null

Це не буде працювати в останній рідній версії для реакції

Вона повинна бути:

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

Для машинопису:

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