React Native权限弹窗触发AppState后台状态致状态重置的解决方法

问题根源 #

1. setState 是异步操作，调用 setChangeAppState(false) 后，changeAppState 不会立即更新，紧接着执行权限请求时，AppState 监听逻辑里的 changeAppState 还是旧值，导致误触发重置。
2. 原监听逻辑的条件判断写反，本该在 changeAppState 为 true 时触发后台重置，却写成了 false，进一步加剧了问题。

修复步骤 #

1. 修正AppState监听的条件逻辑

调整 useEffect 中的监听回调，确保只有在正常状态（changeAppState === true）下，进入后台才触发应用重置：

useEffect(() => {
  if (changeAppState) {
    const appStateListener = AppState.addEventListener(
      'change',
      nextAppState => {
        if (
          (nextAppState === 'background' || nextAppState === 'inactive') &&
          changeAppState === true // 修正此处条件
        ) {
          navigation.dispatch(
            CommonActions.reset({
              index: 0,
              routes: [
                { name: 'HomeWorkerScreen' },
                { name: 'GetLogsScreen' },
                { name: 'WorkersListScreen' },
                { name: 'CardsListScreen' },
              ],
            }),
          );
        }
      },
    );
    return () => {
      appStateListener?.remove();
    };
  }
}, [changeAppState]);

2. 确保状态更新后再执行权限请求

由于 useState 的 setter 是异步的，需要通过额外状态标记+监听来保证顺序：

• 新增状态标记权限请求待执行：

const [isPermissionRequestPending, setIsPermissionRequestPending] = useState(false);

• 修改按钮点击事件，只标记状态：

<TouchableOpacity
  onPress={() => {
    setChangeAppState(false);
    setIsPermissionRequestPending(true);
  }}>

• 新增 useEffect 监听状态变化，待 changeAppState 更新完成后执行权限请求：

useEffect(() => {
  if (!changeAppState && isPermissionRequestPending) {
    FunctionsWorkersList.chooseSource(item);
    setIsPermissionRequestPending(false);
  }
}, [changeAppState, isPermissionRequestPending, item]);

这样就能避免权限弹窗触发的后台状态变更误触发应用重置逻辑。

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