React Navigation 3: кнопка возврата в Android не возвращается к предыдущему экрану

#android #reactjs #react-native #react-navigation

#Android #reactjs #react-родной #реагирующая навигация

Вопрос:

Я обновляю конфигурацию своего маршрутизатора в своем приложении React Native, используя React Navigation 3, и теперь многое было улучшено, но я не понимаю, почему, когда я нажимаю кнопку «Назад» в Android, не отправляет меня в предыдущий вид, а вместо этого отправляет меня в домашний.

Мои маршруты

 const drawerConfig = {
  initialRouteName: 'Home',
  contentComponent: SideMenu,
  drawerWidth: width,
}

const MainDrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: Home,
    },
    Company: {
      screen: Company,
    },
    Gifts: {
      screen: Gifts,
    },
    Jobs: {
      screen: Jobs,
    },
    Job: {
      screen: Job,
    },
    Contact: {
      screen: Contact
    }
  },
  drawerConfig,
);

const InitialStack = createStackNavigator(
  {
    Menu: {
      screen: Menu,
      path: 'menu/',
    }
  },
  {
    initialRouteName: 'Menu',
    headerMode: 'none',
  }
);

const SwitchNavigator = createSwitchNavigator(
  {
    Init: InitialStack,
    App: MainDrawerNavigator,
  },
  {
    initialRouteName: 'Init',
  }
);

const AppContainer = createAppContainer(SwitchNavigator);

export default AppContainer;

Если я сделаю это: откройте ящик, откройте задания, затем нажмите кнопку «Задание», чтобы загрузить представление задания, поток работает хорошо, но если я нажму кнопку «Назад» в представлении задания, отображаются не задания, а главная страница.

Я использую навигацию this.props.navigation.navigate('...') , потому что нажатие не работает.

Вы знаете, почему?

Я использую react-navigation 3.5.1 и react-native 0.59.3

1. большую часть времени вы собираетесь обрабатывать android back button вручную … потому что этого недостаточно, чтобы зависеть от поведения по умолчанию

2. Я думал, что поведение по умолчанию заключалось в том, чтобы всегда переходить к предыдущему экрану, но, похоже, я ошибался.

Ответ №1:

Я только что понял.

Я не писал правильную конфигурацию для своих маршрутов, потому что, если бы я хотел вернуться с задания на задания, а не домой, для каждого «стека» просмотров, который мне нужен, был необходим стек, так что теперь они могут работать именно так, как я хочу, pop отлично работает без использования события обратного обработчика.

Вот так:

 // Jobs stack
const JobsStack = createStackNavigator(
    {
        JobList: {
            screen: Jobs,
        },
        Job: {
            screen: Job,
        },
    },
    {
        headerMode: 'none',
    }
);

// Main drawer
const MainDrawerNavigator = createDrawerNavigator(
    {

        ...
        Jobs: JobsStack,
        Contact: {
            screen: Contact
        }
        ...
    },
    drawerConfig,
);

Спасибо всем людям, которые мне помогли 🙂

Ответ №2:

Вы можете импортировать BackHandler из ‘react-native’ и можете использовать приведенный ниже код в своем классе экрана, откуда вы хотите вернуться:

 componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}

handleBackButton = () => {
    this.props.navigation.goBack();
    return true;
};