React Native中Firebase Cloud Messaging安卓权限请求异常求助

核心问题拆解 #

1. 权限弹窗未弹出直接被拒绝：Android 13+（API≥31）中，POST_NOTIFICATIONS权限若用户之前已拒绝并勾选"不再询问"，直接调用PermissionsAndroid.request会自动返回DENIED；同时需确认权限声明及调用时机的合规性。
2. fetchData多次执行导致数组重复：AppState监听未在组件卸载时清理，若组件因其他原因重渲染（比如权限请求触发的状态更新），会重复绑定监听事件，导致App切换到前台时多次调用fetchData；叠加初始渲染时的直接调用，最终触发重复请求。

具体修复步骤 #

1. 修复权限请求逻辑 #

• 先检查权限当前状态，仅当权限未被永久拒绝时才发起请求，避免自动拒绝的情况。
• 确保POST_NOTIFICATIONS常量正确（部分旧版本React Native可能需要手动定义，而非直接调用内置常量）。

2. 清理AppState监听 #

在useEffect的清理函数中移除AppState事件监听，防止重复绑定导致的多次触发。

3. 避免fetchData重复执行 #

• 给fetchData添加加载状态控制，防止并发请求；
• 若fetchData用于获取列表数据，可在请求前清空数组，或在返回结果时做去重处理，避免重复渲染。

修改后的代码示例 #

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

// 确保POST_NOTIFICATIONS常量正确（部分RN版本可能需要手动定义）
const POST_NOTIFICATIONS = PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS || 'android.permission.POST_NOTIFICATIONS';

const YourComponent = () => {
  const [isLoading, setIsLoading] = useState(false);

  const requestNotificationPermission = async () => {
    try {
      // 先检查权限是否已授予
      const hasPermission = await PermissionsAndroid.check(POST_NOTIFICATIONS);
      if (hasPermission) {
        console.log('Notification permission already granted');
        return;
      }

      // 检查是否被永久拒绝（用户勾选了不再询问）
      const canRequest = await PermissionsAndroid.shouldShowRequestPermissionRationale(POST_NOTIFICATIONS);
      if (!canRequest) {
        console.log('Notification permission is permanently denied, redirect to settings');
        // 可在此处引导用户跳转到应用设置页面开启权限
        return;
      }

      const granted = await PermissionsAndroid.request(
        POST_NOTIFICATIONS,
        {
          title: 'Notification Permission',
          message: 'Allow the app to send you notifications to stay updated',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        },
      );

      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('Notification permission granted');
      } else {
        console.log('Notification permission denied');
      }
    } catch (err) {
      console.warn(err);
    }
  };

  const fetchData = async () => {
    if (isLoading) return; // 防止并发请求重复执行
    setIsLoading(true);
    try {
      // 替换为你的实际数据请求逻辑
      const data = await yourApiCall();
      // 处理数据：清空现有数组再赋值，避免重复
      setYourList([]);
      setYourList(data);
    } catch (err) {
      console.error('Fetch data failed:', err);
    } finally {
      setIsLoading(false);
    }
  };

  const getList = () => {
    // 你的getList逻辑
  };

  useEffect(() => {
    const handleAppStateChange = (state) => {
      if (state === 'active') {
        fetchData();
      }
    };

    // 添加AppState监听
    AppState.addEventListener('change', handleAppStateChange);

    // 初始化执行
    requestNotificationPermission();
    fetchData();
    getList();

    // 清理函数：移除监听，防止重复绑定
    return () => {
      AppState.removeEventListener('change', handleAppStateChange);
    };
  }, []); // 若fetchData/getList依赖外部变量，需添加到依赖数组，移除eslint-disable注释

  return (
    // 你的组件渲染内容
  );
};

export default YourComponent;

额外检查项 #

• 确认AndroidManifest.xml中已添加权限声明：

  <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
  

• 若使用react-native-push-notification，确保配置文件（如AndroidManifest.xml、MainApplication.java）已按官方文档配置完成；
• 测试时可卸载应用重新安装，清除之前的权限拒绝记录，避免永久拒绝状态影响测试。

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