使用 React Native 检测从应用程序设置/背景返回

Posted 2023-04-15

【中文标题】使用 React Native 检测从应用程序设置/背景返回

【英文标题】：Detect coming back from app settings/background with React Native

【发布时间】：2020-11-25 01:05:36

【问题描述】：

我的应用请求使用位置服务的权限。

如果用户拒绝权限，他们可以点击按钮进入设置页面并授予权限。

在 ios 上，他们可以选择直接返回应用。在 android 上，我认为他们可以做类似的事情。

有没有办法检测回到应用程序，以便我可以再次检查他们的权限？

我已经尝试过 React Navigation 的 useFocusEffect 钩子：

useFocusEffect(
    React.useCallback(() => 
        console.log("navigated")
        return () => getPosition()
    , [])
)

但不幸的是，这仅在应用中的屏幕/路线之间导航时有效。

有没有办法检测应用程序从后台过渡到前台？

【参考方案1】：

您可以使用https://reactnative.dev/docs/appstate 跟踪应用状态

在伪代码中：如果之前是“背景”，现在是“活动”，则运行您的效果

【参考方案2】：

Ciao，当我想管理权限时，我使用react-native-permissions。通过这种方式，您可以直接在您的应用中管理所有权限，而无需退出。

适用于 iOS 和 Android。在你的情况下，你可以这样：

import check, PERMISSIONS, RESULTS from 'react-native-permissions';

check(<permission you need>)
  .then((result) => 
    switch (result) 
      case RESULTS.UNAVAILABLE:
        console.log(
          'This feature is not available (on this device / in this context)',
        );
        break;
      case RESULTS.DENIED:
        console.log(
          'The permission has not been requested / is denied but requestable',
        );
        break;
      case RESULTS.GRANTED:
        console.log('The permission is granted');
        break;
      case RESULTS.BLOCKED:
        console.log('The permission is denied and not requestable anymore');
        break;
    
  )
  .catch((error) => 
    // …
  );

【讨论】：

但如果他们选择“从不”授予权限，那么这将始终以 BLOCKED 的形式返回，对吧？这就是为什么我要考虑去设置和返回:)

Ciao，通过调用check(<permission>)，您可以再次询问用户是否要允许权限（除非他选中“不再询问”）。

是的，这就是我的假设。在 ios 上，用户获得的唯一选项是“从不”、“在使用应用程序时”或“始终”。单击“从不”意味着即使您再次check() 或request()，它也总是以被阻止的形式返回。

另一件事：如果你尝试使用openSettings().catch(() => console.warn('cannot open settings')); 然后点击返回按钮，你应该返回到你的应用程序。但我不知道这是否是您要找的 qhat。

【参考方案3】：

使用这个钩子：

// hooks/useAppIsActive.ts

import  useCallback, useEffect, useRef  from "react";
import  AppState  from "react-native";

export default (callback: Function) => 
  const appStateRef = useRef(AppState.currentState);
  const handleAppStateChange = useCallback((nextAppState) => 
    if (
      appStateRef.current.match(/inactive|background/) &&
      nextAppState === "active"
    ) 
      callback();
    

    appStateRef.current = nextAppState;
  , []);

  useEffect(() => 
    AppState.addEventListener("change", handleAppStateChange);
    return () => 
      AppState.removeEventListener("change", handleAppStateChange);
    ;
  , []);
;

并从你想要检测“回来”的组件中，通过参数传递你想要运行的回调：

const MyView = () => 
  const requestLocationAccess = useCallback(() => 
    // request permissions...
  , [])

  useAppIsActive(() => requestLocationAccess());