React Native中useFocusEffect从系统设置返回应用时未触发的问题排查与修复咨询

首先咱们先理清楚核心问题：从系统设置返回应用后，useFocusEffect完全没触发，导致无法重新检查通知权限状态，进而影响后续的跳转控制逻辑。这主要有两个关键原因：

1. useFocusEffect的触发逻辑与错误的清理函数 #

你的useFocusEffect依赖数组是空的[]，这意味着它只会在组件首次挂载时执行一次。当你从设置界面返回当前页面时，即便屏幕重新获得焦点，因为依赖没有变化，React也不会重新执行这个回调函数。

另外，你在useFocusEffect的清理函数里调用了openSettings()，这是完全的逻辑错误——清理函数是在组件失去焦点时执行的（比如用户跳转到其他页面时），这里反而打开设置，完全不符合你的需求。

2. 缺少应用前后台状态监听 #

useFocusEffect主要处理应用内页面的焦点切换，但当用户离开应用进入系统设置时，属于应用从前台切换到后台再回到前台的场景，这种情况需要用AppState来监听状态变化才能捕捉到。

修复后的完整代码实现 #

下面是调整后的代码，我标注了关键修改点：

import React, { useState, useEffect } from 'react';
import { Alert, Platform, Button } from 'react-native';
import { Notifications } from 'expo';
import { useFocusEffect } from '@react-navigation/native';
import { Linking, AppState } from 'react-native';

const PermissionsIntro = ({ navigation}) => { 
  const [navigate, setNavigate] = useState(false);
  const [expoPushToken, setExpoPushToken] = useState('');
  const [appState, setAppState] = useState(AppState.currentState);

  // 提取独立的权限检查函数，方便复用
  async function configurePushNotifications() { 
    const { status } = await Notifications.getPermissionsAsync(); 
    let finalStatus = status; 
    console.log('status of notification', status);

    // 修正原有的冗余条件分支，逻辑更清晰
    if(status === 'granted'){ 
      setNavigate(true); 
    } else {
      // 未授权时发起权限请求
      const { status: requestedStatus } = await Notifications.requestPermissionsAsync(); 
      finalStatus = requestedStatus; 
      
      if(finalStatus === 'granted'){
        setNavigate(true);
      } else {
        setNavigate(false);
        Alert.alert('Permission required', 'Push notifications need the appropriate permissions.');
      }
    }

    // 仅在权限授权后获取推送Token
    if(finalStatus === 'granted'){
      const pushTokenData = await Notifications.getExpoPushTokenAsync(); 
      setExpoPushToken(pushTokenData.data); 
      
      if (Platform.OS === 'android') { 
        Notifications.setNotificationChannelAsync('default', { 
          name: 'default', 
          importance: Notifications.AndroidImportance.DEFAULT, 
        }); 
      }
    }
  } 

  // 监听屏幕焦点，每次页面获得焦点时检查权限
  useFocusEffect( 
    React.useCallback(() => { 
      configurePushNotifications();
      console.log('Screen is focused in app');

      // 清理函数：做状态清理，而非错误打开设置
      return () => { 
        console.log('Screen lost focus');
      }; 
    }, []) 
  ); 

  // 监听应用前后台状态，从后台/设置回到前台时重新检查权限
  useEffect(() => {
    const handleAppStateChange = (nextAppState) => {
      // 当应用从后台/非活跃状态回到前台时，触发权限检查
      if (appState.match(/inactive|background/) && nextAppState === 'active') {
        configurePushNotifications();
        console.log('App returned from background/settings');
      }
      setAppState(nextAppState);
    };

    const subscription = AppState.addEventListener('change', handleAppStateChange);
    return () => {
      subscription.remove(); // 组件卸载时移除监听
    };
  }, [appState]);

  const openSettings = () => { 
    Linking.openSettings(); 
  }; 

  // 跳转控制逻辑
  const confirm = () => { 
    console.log('navigate', navigate); 
    if (navigate) { 
      navigation.navigate('CreateProfile'); 
    } else { 
      console.log('Please enable push notification permissions!'); 
      openSettings(); 
    } 
  }; 

  // 补充组件UI示例（原代码缺失）
  return (
    <Button title="Confirm" onPress={confirm} />
  );
}

export default PermissionsIntro;

关键修改说明 #

• 修正useFocusEffect逻辑：移除了清理函数里错误的openSettings()调用，确保每次页面获得焦点时都重新检查权限。
• 添加AppState监听：覆盖了用户离开应用（比如进入系统设置）再返回的场景，此时会自动重新检查权限状态。
• 优化权限判断分支：去掉了原代码中重复的条件判断，逻辑更简洁清晰。
• 权限授权后才执行Token操作：避免在未授权时做无效的Token获取和安卓通道配置。

这样修改后，无论是在应用内切换页面回到该组件，还是从系统设置返回应用，都会重新触发权限检查，确保navigate状态始终和当前权限状态保持一致，完美满足你的需求。

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