Appstate 不断在 Android 中的 React Native 中获得变化

Question

我正在开发 React 本机项目，并且正在获取位置权限。此外，我必须始终跟踪位置权限，例如用户是否在安装应用程序后授予权限访问权限，然后一段时间后用户转到设备设置中的应用程序设置并禁用/撤销权限。再次，一旦应用程序从后台到前台，我必须基于此检查权限，需要显示消息。

所以，我正在使用 Appstate。但是，奇怪的是，在 Android 中，安装应用程序后，如果用户使用“不再显示”复选框拒绝了该权限，那么 Appstate 会一直以 background 和 active 不断变化。 它一直在循环。

componentDidMount = async () => {
    AppState.addEventListener('change', this.handleAppStateChange);
  };

  componentWillUnmount() {
    AppState.removeEventListener('change', this.handleAppStateChange);
    Geolocation.clearWatch(this.watchID);
  }

  handleAppStateChange = async nextAppState => {
    const {appState} = this.state;
    console.log('nextAppState -->', nextAppState);
    console.log('appState -->', appState);
    if (appState === 'active') {
      // do this
      this.showLoader();
      await this.requestAndroidLocationPermission();
    } else if (appState === 'background') {
      // do that
    } else if (appState === 'inactive') {
      // do that other thing
    }

    this.setState({appState: nextAppState});
  };

requestAndroidLocationPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {},
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        this.getLatitudeLongitude();
      } else if (granted === PermissionsAndroid.RESULTS.NEVER_ASK_AGAIN) {
        this.hideLoader();
        this.setState({
          errorMessage: 'Location permission is denied',
          isLoading: false,
        });
      } else {
        this.hideLoader();
        this.requestAndroidLocationPermission();
      }
    } catch (err) {
      console.warn(err);
    }
  };

在以不再显示的方式拒绝许可后继续打印（循环）

appState --> active
nextAppState --> background
appState --> active
nextAppState --> background
appState --> active
nextAppState --> background
appState --> active

它继续，永不停止。

如何处理？有什么建议吗？

Answer 1

我遇到了同样的问题。不要使用 AppState。有问题。

问题在于 RN 对“背景”的定义。 react-native 使用 android 的活动（UI 线程的持有者和您的 UI 所在的位置）onPause 回调作为发送“背景”信号的触发器。但是，onPause 每次出现在您的活动视图层次结构前面时都会调用，例如对话框（例如权限框）、其他活动（例如文件选择器）等；对于 android react-native，“背景”意味着“被外部 UI 元素/android 任务遮蔽”而不是“暂停并发送到后台执行其他操作”，从而导致您看到的循环。最短的解决方案是在 ReactActivity 中覆盖 onPause，并添加控制条件以确保 super.onPause 仅在您实际进入后台时调用，例如检查您的任务堆栈，或者如果正在调用权限对话框，因此您避免这种循环/错误调用。第二种选择是提供您自己的应用生命周期事件，并提供明确的触发条件。

Answer 2

今天我遇到了类似的问题。

我可以使用 android 中的“focus”和 ios 中的“change”来解决它。

我有一个这样的自定义钩子：

import { useEffect } from 'react';
import { AppState, Platform } from 'react-native';


const focusEvent = Platform.OS === 'ios' ? 'focus' : 'change';

const useLocationListener = () => {


  useEffect(() => {
    AppState.addEventListener(focusEvent, handleAppStateChange);

    getLocationAsync();
    return () => {
      AppState.removeEventListener(focusEvent, handleAppStateChange);
    };
  }, []);

  const handleAppStateChange = (nextAppState: string) => {
    if (nextAppState === 'active') {
      getLocationAsync();
    }
  };

  const getLocationAsync = async () => {
    const { canAskAgain, status } = await Permissions.getAsync(
      Permissions.LOCATION
    );

    if (canAskAgain) {
      const response = await Permissions.askAsync(Permissions.LOCATION);
       // handle location 
    } 
       // handle location with "status"
    
  };
};

export default useLocationListener;

Answer 3

您可以使用一个标志来检查应用是应该处理后台还是只是一个权限调用。

const shouldHandleBackground = useRef(true)

const handler = (state) => { 
    if (state === 'active' && shouldHandleBackground.current) { 
        doStuff() 
    }
}

// when calling for permisson make the flag false

shouldHandleBackground.current = false
await Android.permission.LocationPermission()
shouldHandleBackground.current = true

在请求许可后，您可以将标志设为真