react-navigation 路由级登录拦截

最新推荐文章于 2025-07-16 10:27:52 发布

原创最新推荐文章于 2025-07-16 10:27:52 发布 · 6.6k 阅读

1 ·

CC 4.0 BY-SA版权

React Native笔记专栏收录该内容

25 篇文章

订阅专栏

本文介绍了如何在React Navigation中设置路由状态改变拦截器，实现登录跳转拦截功能，确保未登录用户无法访问受保护的页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 路由栈

const Navigator = StackNavigator({
    Setting: {screen: SettingSCreenView},
    ....
});

1、设置路由状态改变拦截

function getCurrentRouteName(navigationState) {
    if (!navigationState) {
        return null;
    }
    const route = navigationState.routes[navigationState.index];
    // dive into nested navigators
    if (route.routes) {
        return getCurrentRouteName(route);
    }
    return route.routeName;
}


class StartScreen extends Component {
    render() {
        const prefix = Platform.OS === 'android' ? 'xx://aa/' : 'xx://';
        return (
            <Navigator uriPrefix={prefix}
                onNavigationStateChange={
                    (prevState, currentState) => {
                        const currentScene = getCurrentRouteName(currentState);
                        if(currentScene == 'Setting'){
                        // to do something
                    }
                } 
            />);
    }

2、登录跳转拦截

// 拦截登录的路由
const needLoginRoute = ['Setting'];

const defaultGetStateForAction = StartScreen.router.getStateForAction;

StartScreen.router.getStateForAction = (action, state) => {
    let routeName = dealMsgDeal(action.routeName);
    // 拦截需要登录后跳转的也没
    if(action.routeName === routeName && islogin == false){
        this.routes = [
            ...state.routes,
            {key: 'id-'+Date.now(), routeName: 'Login', params: { name: routeName, params: action.params}},
        ];
        return {
            ...state,
            routes,
            index: this.routes.length - 1,
        };
    }
    return defaultGetStateForAction(action, state);
};


// 需要拦截登录的页面
function dealMsgDeal(routeName){
    let theRouteName = '';
    if(routeName){
        for (var i in needLoginRoute) {
            if (needLoginRoute[i] == routeName) {
                theRouteName = routeName;
                break;
            }
        }
    }
    return theRouteName;
}