怎么实现react native安卓手机特定页面按两次回退键退出应用?



  • 我的react native是使用createStackNavigator和createBottomTabNavigator导航构建的项目,首先默认打开的是登录页面,然后进入到主页面,我希望是在主页面按两次返回键退出应用,目前使用BackHandler,只能在登录页面按两次返回键退出应用,要怎么在主页面按两次返回键退出应用呢?
    我也在退出方面里面写了如下代码:
    const nav = this.navigator;
    const routers = nav.getCurrentRoutes();
    来判断当前的导航是那个,但是提示没有getCurrentRoutes这个方法。
    各位大神有没有办法解决这个问题?



  • 从登录页跳转到首页,用NavigationActions.reset()方式跳转,然后在你注册路由的地方
    const defaultStateAction = App.router.getStateForAction;
    App.router.getStateForAction = (action, state) => {
    if (state && action.type === NavigationActions.BACK && state.index === 0) {
    if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
    return false;
    } else {
    this.lastBackPressed = Date.now();
    Toast.show("再按一次退出应用");
    const routes = [...state.routes];
    return {
    ...state,
    ...state.routes,
    index: routes.length - 1,
    };
    }
    }
    return defaultStateAction(action, state);
    };
    这样去判断



  • 你好,谢谢指导。我路由都是使用createStackNavigator构建的,代码如下:
    /**

    • @author taony
    • @description Navigation
    • @since 2018-05-22
      */

    import React, {Component} from 'react';
    import {Platform} from 'react-native';
    import {createStackNavigator, createBottomTabNavigator} from 'react-navigation';
    import Icon from 'react-native-vector-icons/Ionicons';
    import Home from '../home/Home';
    import Module from '../modules/Module';
    import Apply from '../app/App';
    import My from '../my/My';
    import Others from '../common/Others';
    import Login from '../login/Login';

    const tabHome = createStackNavigator({
    Home: {
    screen: Home,
    },
    });

    const taabModule = createStackNavigator({
    Module: {
    screen: Module
    }
    });

    const tabApply = createStackNavigator({
    Apply: {
    screen: Apply
    }
    });

    const tabMy = createStackNavigator({
    My: {
    screen: My
    }
    });

    const BottomTabNavigator = createBottomTabNavigator(
    {
    Home: {
    screen: tabHome,
    navigationOptions: ({navigation}) => ({
    tabBarLabel: '首页',
    tabBarIcon: ({tintColor}) => (<Icon name='md-home' size={25} color={tintColor}/>),
    }),
    },
    Module: {
    screen: taabModule,
    navigationOptions: ({navigation}) => ({
    tabBarLabel: '模块',
    tabBarIcon: ({tintColor}) => (<Icon name='md-apps' size={25} color={tintColor}/>),
    }),
    },
    Apply: {
    screen: tabApply,
    navigationOptions: ({navigation}) => ({
    tabBarLabel: '应用',
    tabBarIcon: ({tintColor}) => (<Icon name='md-appstore' size={25} color={tintColor}/>)
    }),
    },
    My: {
    screen: tabMy,
    navigationOptions: ({navigation}) => ({
    tabBarLabel: '我的',
    tabBarIcon: ({tintColor}) => (<Icon name='md-person' size={25} color={tintColor}/>),
    }),
    },
    },
    {
    backBehavior: 'none',
    tabBarOptions: {
    activeTintColor: '#6699FF',
    inactiveTintColor: '#999999',
    style: {
    backgroundColor: '#F8F8F8'
    },
    indicatorStyle: {
    opacity: 0
    },
    tabStyle: {
    padding: 0
    },
    labelStyle: {
    fontSize: 12,
    },
    },
    }
    );

    export const StackNavigator = createStackNavigator(
    {
    Index: {
    screen: BottomTabNavigator,
    },
    Others: {
    screen: Others,
    },
    Login: {
    screen: Login,
    },
    },
    {
    initialRouteName: 'Login',
    headerMode: 'screen',
    mode: Platform.OS === 'ios' ? 'modal' : 'card',
    navigationOptions: {
    headerStyle: {
    backgroundColor: '#6699FF',
    height: 0,
    },
    headerTintColor: '#ffffff',
    headerTitleStyle: {
    fontWeight: 'normal',
    },
    },
    }
    );
    首先打开的是登录页面,然后在登录页面后点击登录按钮后使用createStackNavigator的this.props.navigation.navigate('Index');进入到主页。是这样的一个情况,不是直接使用router的。