单击后退按钮时，如果要浏览汉堡包菜单，请转至主页

Question

因此，在下面，我介绍了我的应用程序的导航方案：

单击“汉堡包”图标后的菜单

• 家
• 轮廓
• 保存地址
• 钱包
• 登出

以上屏幕均不依赖于上面列出的任何其他屏幕。

因此，要导航，我使用的是navigation.replace（）。 但据我所知，如果使用replace，则无法弹出或返回。

我实际上想要实现的是类似Gmail android应用程序的工作方式。 如果您使用汉堡包菜单进行导航，然后在android上点击后退硬件按钮，则在退出该应用之前，请先返回主屏幕。 在我的情况下，它直接退出应用程序。

下面，我展示了到目前为止的一小段工作：

app.android.js：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  BackAndroid,
  Navigator
} from 'react-native';

import Drawer from 'react-native-drawer';

// Import icon for close button
import Icon from 'react-native-vector-icons/FontAwesome';

// Import route components
import Home from './customer/home/home';
import Profile from './customer/profile/profile';
import MyOrders from './customer/my_orders/my_orders';
import SavedAddresses from './customer/saved_addresses/saved_addresses';
import Wallet from './customer/wallet/wallet';

// Import nav menu
import Menu from './menu/menu';

/**
 * navigationStyles={Navigator.NavigationBar.StylesIOS} props to Navigator.NavigationBar
 * This will apply iOS styles to android as well. We can also apply android style on iOS devices
 *
*/


// ////////////////////////////////////////////////////////////////////////
// Icons
// ///////////////////////////////////////////////////////////////////////
// Hamburger icon
const hamburgerIcon = <Icon name="bars" size={25} color={'#3d3d3d'} />;

// Cart icon
const cartIcon = <Icon name="shopping-cart" size={25} color={'#3d3d3d'} />;


// ////////////////////////////////////////////////////////////////////////
// Make routes like the one below to push your screen to the new component
// ///////////////////////////////////////////////////////////////////////

// Home screen
const homeScene = {
  title: 'home',
  component: Home,
  passProps: {
    name: 'home'
  }
};

// Customer profile page
const profile = {
  title: 'profile',
  component: Profile,
  passProps: {
    name: 'profile'
  }
};

// Customer's my order page
const myOrders = {
  title: 'my orders',
  component: MyOrders,
  passProps: {
    name: 'my orders'
  }
};

// Customer's saved address page
const savedAddresses = {
  title: 'saved addresses',
  component: SavedAddresses,
  passProps: {
    name: 'saved addresses'
  }
};

// Customer's saved address page
const wallet = {
  title: 'wallet',
  component: Wallet,
  passProps: {
    name: 'wallet'
  }
};

const logout = {
  title: 'Home',
  component: Home,
  passProps: {
    name: 'logout'
  }
};

const menu = [
  homeScene,
  profile,
  myOrders,
  savedAddresses,
  wallet,
  logout
];

// ////////////////////////////////////////////////////////////////////////
// Android hardware back button functionality
// ///////////////////////////////////////////////////////////////////////

let _navigator;
BackAndroid.addEventListener('hardwareBackPress', () => {
  if (_navigator && _navigator.getCurrentRoutes().length > 1) {
    _navigator.pop();
    return true;
  }
  return false;
});



/**
 * Class app from where the app bootstraps
 */
export default class App extends Component {

  // This is where all your routes will be processed
  renderScene(route, navigator) {
    // Set a variable to get the route
    let RouteComponent = route.component;

    _navigator = navigator;

    // With props return the components
    return <RouteComponent navigator={navigator} {...route.passProps} />;
  }

  static navigationBarRouteMapper = openControlPanel => ({
      LeftButton: function(route, navigator, index, navState) {
        return (
          <TouchableOpacity style={navBarStyle.left} onPress={() => openControlPanel()}>
            <View>
              {hamburgerIcon}
            </View>
          </TouchableOpacity>
        );
      },
      RightButton: function(route, navigator, index, navState) {
        return (
          <View style={navBarStyle.right}>
            {cartIcon}
            <View style={navBarStyle.counter}>
              <Text style={navBarStyle.counterText}>20</Text>
            </View>
          </View>
        );
      },
      Title: function(route, navigator, index, navState) {
        return <Text style={navBarStyle.title}>{route.title.toUpperCase()}</Text>;
      }
  })

  closeControlPanel() {
    this._drawer.close();
  }

  openControlPanel() {
    this._drawer.open();
  }

  getNavigator(route) {
    this.refs.navigator.replace(route);
    this.closeControlPanel();
  }

  render() {
    return (
      <Drawer
        ref={ (ref) => { this._drawer = ref; } }
        type="overlay"
        content={<Menu navigator={this.getNavigator.bind(this)} menuItems={menu} closeControlPanel={this.closeControlPanel.bind(this)} />}
        tapToClose={true}
        openDrawerOffset={0.2}
        panCloseMask={0.2}
        panOpenMask={20}
        acceptPan={true}
        closedDrawerOffset={-3}
        styles={drawerStyle}
        tweenHandler={(ratio) => ({

          // This code will maintain the opacity for main
          // Whilst the opacity for the mainOverlay on the screen will be faded.
          main: { opacity: 1 },
          mainOverlay: {
            opacity: ratio / 2,
            backgroundColor: 'black',
          }

        })}>
        <Navigator
          initialRoute={homeScene}
          renderScene={this.renderScene}
          ref="navigator"
          navigationBar={
            <Navigator.NavigationBar
              routeMapper={App.navigationBarRouteMapper(this.openControlPanel.bind(this))}
              style={navBarStyle.navBar}
            />
          }
        />
      </Drawer>
    );
  }
}

请注意，如果用户使用菜单进行导航，则只会出现这种情况（退出之前先回到家）。

例如，如果我导航到个人资料，然后可能是“保存的地址”，则单击返回时，在退出前应显示主屏幕。 Gmail android应用就是最好的例子。

Answer 1

好的，我找到了一种解决方案，可以解决在替换路线时单击返回退出应用程序的问题。 因此，这是我在应用程序退出之前进入首页的方式：

BackAndroid.addEventListener('hardwareBackPress', () => {
  if (_navigator && _navigator.getCurrentRoutes().length > 1) {
    _navigator.pop();
    return true;
  } 

  // Check if current route is home on clicking back
  // If not navigate to home else close the app
  else if(_navigator && _navigator.navigationContext._currentRoute.title !== 'home') {
    _navigator.replace(homeScene);
    return true;
  }

  return false;
});

这可能不是确切的解决方案，但对我有用。