Навигация по BackHandler в Навигаторе ящиков и Навигаторе основного стека в Навигации React - PullRequest
Новая
       18

Навигация по BackHandler в Навигаторе ящиков и Навигаторе основного стека в Навигации React

0 голосов
/ 24 марта 2020

Мне не удается заставить backHandler (аппаратную кнопку «Назад» на Android) работать с моим ящиком и стековой навигацией при React-Navigation. Кнопка «Назад» отлично работает на экране домашней страницы, но перестает работать, как только я перехожу к следующему экрану, находится ли экран на экране ящика или в стеке. Вот мой Drawer и MainStackNavigator.

Примечание: объединение этих двух не помогло мне, так как оба они не являются частью компонента, и я использую в своем приложении избыточность

Anyone есть идеи, как это можно решить?

DrawerNavigatior 

const DrawerNavigator = createDrawerNavigator(
  {
    Homep: Homepage,
    Home: HomeScreen,
    Shop: ShopScreen,
    Order: OrdersScreen,
    Wishlist: WishlistScreen,
    Search: SearchScreen,
    Profile: ProfileScreen,
    ShoppingBag: ShoppingBagScreen,


  },

MainStackNavigator 


const MainStackNavigator = createStackNavigator(
  {
    Drawer: { screen: DrawerStackNavigator },
    CategoryProductGrid: { screen: CategoryProductGridScreen },
    Settings: { screen: SettingsScreen },
    Contact: { screen: ContactUsScreen },
    EditProfile: { screen: EditProfileScreen },
    ShippingAddress: { screen: ShippingAddressScreen },
    LocList: { screen: LocationList },
    ShippingMethod: { screen: ShippingMethodScreen },
    PaymentMethod: { screen: PaymentMethodScreen },
    AddACard: { screen: AddACardScreen },
    Checkout: { screen: CheckoutScreen },
    Bag: { screen: ShoppingBagScreen },


  },

Я использую прослушиватель событий BackHander следующим образом 

  componentDidMount() {
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
  }

  componentWillUnmount() {
    this.backHandler.remove()
  }

  handleBackPress = () => {

    Alert.alert(
      'Exit App',
      'Exiting the application?',
      [
        {
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel'
        },
        {
          text: 'OK',
          onPress: () => BackHandler.exitApp()
        }
      ],
      {
        cancelable: false
      }
    );
    return true;

  };

1 Ответ

0 голосов
/ 30 марта 2020

Wohoo, после недели поисков и проб разных способов. Решение было очень простым, мне пришлось переместить навигацию по ящикам и поместить все это в MainstackNavigator, чтобы кнопка «Назад назад» работала правильно

...