React Native生物验证界面路由拦截及验证成功后恢复路由咨询

要实现生物验证界面阻止所有路由操作、验证通过后恢复的需求，核心思路是全局拦截导航动作并缓存，待验证通过后执行缓存的动作，具体实现如下：

1. 创建导航拦截上下文（全局状态管理） #

用React Context管理导航拦截状态和待执行的导航动作，确保整个应用共享拦截逻辑：

// NavigationInterceptorContext.tsx
import { createContext, useContext, useState, ReactNode } from 'react';
import type { NavigationAction } from '@react-navigation/native';

type NavigationInterceptorContextType = {
  isNavigationBlocked: boolean;
  setIsNavigationBlocked: (block: boolean) => void;
  pendingNavigationActions: NavigationAction[];
  addPendingAction: (action: NavigationAction) => void;
  executePendingActions: () => void;
};

const NavigationInterceptorContext = createContext<NavigationInterceptorContextType | undefined>(undefined);

export const NavigationInterceptorProvider = ({ children }: { children: ReactNode }) => {
  const [isNavigationBlocked, setIsNavigationBlocked] = useState(false);
  const [pendingNavigationActions, setPendingNavigationActions] = useState<NavigationAction[]>([]);

  const addPendingAction = (action: NavigationAction) => {
    setPendingNavigationActions(prev => [...prev, action]);
  };

  const executePendingActions = () => {
    setPendingNavigationActions([]);
  };

  return (
    <NavigationInterceptorContext.Provider
      value={{
        isNavigationBlocked,
        setIsNavigationBlocked,
        pendingNavigationActions,
        addPendingAction,
        executePendingActions,
      }}
    >
      {children}
    </NavigationInterceptorContext.Provider>
  );
};

export const useNavigationInterceptor = () => {
  const context = useContext(NavigationInterceptorContext);
  if (!context) {
    throw new Error('useNavigationInterceptor必须在NavigationInterceptorProvider内部使用');
  }
  return context;
};

2. 在根导航容器拦截所有导航动作 #

利用NavigationContainer的onAction回调，拦截所有导航请求，根据拦截状态决定执行还是缓存：

// App.tsx
import { NavigationContainer } from '@react-navigation/native';
import { NavigationInterceptorProvider, useNavigationInterceptor } from './NavigationInterceptorContext';

function RootNavigation() {
  const { isNavigationBlocked, addPendingAction } = useNavigationInterceptor();

  const handleNavigationAction = (action: any) => {
    // 允许进入生物验证界面的导航（避免拦截自身）
    if (action.type === 'NAVIGATE' && action.payload.name === 'biometricsScreen') {
      return true;
    }

    // 若导航被拦截，缓存动作并阻止执行
    if (isNavigationBlocked) {
      addPendingAction(action);
      return false;
    }

    // 正常导航直接放行
    return true;
  };

  return (
    <NavigationContainer onAction={handleNavigationAction}>
      {/* 你的应用导航树（比如HomeStackNavigator等） */}
    </NavigationContainer>
  );
}

export default function App() {
  return (
    <NavigationInterceptorProvider>
      <RootNavigation />
    </NavigationInterceptorProvider>
  );
}

3. 生物验证界面控制拦截状态 #

在生物验证界面，进入时开启拦截，验证成功后解除拦截并执行缓存的导航动作：

// BiometricsScreen.tsx
import { useEffect } from 'react';
import { BackHandler } from 'react-native';
import { useHomeHook } from './useHomeHook';
import { useNavigationInterceptor } from './NavigationInterceptorContext';
import { useNavigation } from '@react-navigation/native';

const BiometricsScreen = () => {
  const { isBiometricSuccessfull } = useHomeHook();
  const { setIsNavigationBlocked, executePendingActions } = useNavigationInterceptor();
  const navigation = useNavigation();

  useEffect(() => {
    // 进入页面立即开启导航拦截
    setIsNavigationBlocked(true);

    // 处理安卓物理返回键
    const preventGoingBack = () => !isBiometricSuccessfull;
    BackHandler.addEventListener('hardwareBackPress', preventGoingBack);

    return () => {
      BackHandler.removeEventListener('hardwareBackPress', preventGoingBack);
    };
  }, []);

  // 验证成功后解除拦截，执行缓存的导航动作
  useEffect(() => {
    if (isBiometricSuccessfull) {
      setIsNavigationBlocked(false);
      executePendingActions();
      // 可选择自动返回Home，或让缓存的导航动作自行处理
      navigation.goBack();
    }
  }, [isBiometricSuccessfull, setIsNavigationBlocked, executePendingActions, navigation]);

  // 你的生物验证UI渲染
  return (
    // ... 验证按钮、指纹/人脸组件等
  );
};

export default BiometricsScreen;

1. Home组件导航逻辑优化 #

原useFocusEffect会在每次Home页面聚焦时触发，可能导致重复跳转生物验证界面。改成监听isBiometricSuccessfull的变化，仅在状态切换为失败时导航：

const HomeComponent = () => {
  const { isBiometricSuccessfull } = useHomeHook();
  const navigation = useNavigation();

  useEffect(() => {
    if (!isBiometricSuccessfull && navigation.isReady()) {
      navigation.navigate('biometricsScreen');
    }
  }, [isBiometricSuccessfull, navigation]);

  return (
    <HomeStackNavigator.Navigator
      screenOptions={{
        headerShown: false,
        animation: 'slide_from_right',
      }}>
      {/* 你的子屏幕 */}
    </HomeStackNavigator.Navigator>
  );
};

2. 简化返回键拦截逻辑 #

原preventGoingBack函数的三元表达式可以简化为直接返回!isBiometricSuccessfull，逻辑更清晰：

function preventGoingBack(): boolean {
  return !isBiometricSuccessfull;
}

3. 确保导航就绪判断 #

在执行导航前，始终通过navigation.isReady()判断导航容器是否初始化完成，避免在应用启动初期触发无效导航。

内容的提问来源于stack exchange，提问作者Eissa Faheem