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

【问题标题】：Detect coming back from app settings/background with React Native使用 React Native 检测从应用程序设置/背景返回
【发布时间】：2020-11-25 01:05:36
【问题描述】：

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

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

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

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

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

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

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

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

【问题讨论】：

标签： react-native react-navigation

【解决方案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());
}

【讨论】：