react-navigation 路由级登录拦截

// 路由栈

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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!