Отключить кнопку возврата на определенном экране c (React Navigation Stack) - PullRequest
Новая
       71

Отключить кнопку возврата на определенном экране c (React Navigation Stack)

1 голос
/ 13 июля 2020

Здравствуйте! Мне нужно отключить кнопку возврата на панели навигации. помогите пожалуйста на go обратно в Checkout.

Пример: нажмите здесь 

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { OrderProvider } from '../contexts/order';

import Home from '../pages/Home';
import Checkout from '../pages/Checkout';
import Success from '../pages/Checkout/success';

const AppStack = createStackNavigator();

const AppRoutes = () => (
  <OrderProvider>
    <AppStack.Navigator screenOptions={{ headerShown: false }}> 
      <AppStack.Screen name="Home" component={Home} />  <-- here
      <AppStack.Screen name="Checkout" component={Checkout} />
      <AppStack.Screen name="Success" component={Success} /> <--- here
    </AppStack.Navigator>
  </OrderProvider>
);

export default AppRoutes;


import React from 'react';
import { View} from 'react-native';

const Success = () => {
  return (
    <View />
  );
};

export default Success;

1 Ответ

0 голосов
/ 13 июля 2020

Вы можете сделать следующее: 

const Home = () => {
  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        return true;
      };

      BackHandler.addEventListener('hardwareBackPress', onBackPress);

      return () =>
        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
    }, []),
  );
  // ...
};

const Success = ({navigation}) => {
  useFocusEffect(
    React.useCallback(() => {
      const onBackPress = () => {
        navigation.navigate('Home');
        return true;
      };

      BackHandler.addEventListener('hardwareBackPress', onBackPress);

      return () =>
        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
    }, []),
  );
  // ...
};

Я настроил его так, чтобы возврат на экран Home ничего не делал, возвращая true при вызове события hardwareBackPress.

Для экрана Success я возвращаюсь назад на Home.

Я предположил, что это именно то поведение, которое вы ищете, читая свой вопрос.

Важно, чтобы вы не забыли импортировать useFocusEffect из реакции-навигации везде, где вы его используете: 

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

Когда возвращать true или false в функции обработчика событий hardwareBackPress, объясняется в документации по навигации по реакции:

Возвращение true из onBackPress означает, что мы обработали событие, и слушатель реакции-навигации не будет вызван, поэтому экран не появится. Возврат false вызовет всплытие события, и на экране появится прослушиватель response-navigation.

Если вы хотите узнать больше, прочтите документацию здесь: https://reactnavigation.org/docs/custom-android-back-button-handling/.

...