使用 expo-notifications 处理传入通知

Posted 2023-02-19

【中文标题】使用 expo-notifications 处理传入通知

【英文标题】：Handle incomming notification with expo-notifications

【发布时间】：2021-10-27 05:15:08

【问题描述】：

我对以下代码示例有疑问：

Notifications.setNotificationHandler(//makes sure notification is displayed even when app is open, nothing else
    handleNotification: async (notification) => 
        //const value = await AsyncStorage.getItem('presetlanguage');
        //console.log("ASYNC STORAGE LANGUAGE FROM OUTSIDEEEE: ", value)
        //if(notification.request.content.body == "You received a new letter from a PigeonBuddy!")
        //    console.log("hat geklappt")
        //
        return
            shouldShowAlert: true
        ;
    
);

const MainScreen = props => 
    const dispatch = useDispatch();
    var chosenLanguage = useSelector(state => state.myLanguage.myLanguage); ...........

setNotificationHandler 负责处理传入的通知，因此我想过滤传入的通知。例如，根据我在哪个屏幕上，我想显示通知或不显示通知。 但问题是，我既不能访问我的导航状态，也不能访问我的 redux 状态，因为通知的这种处理发生在默认屏幕主函数之外，该函数涵盖了所有变量，并且还通过导航使用道具。禁止在那里调用 redux 钩子，而且我无法访问我的导航状态，因为我无法访问通过导航获得的 props 变量。

如何根据我所在的屏幕显示我的通知？像 Facebook 这样的公司是如何做到的？如果您在聊天屏幕上，则不会收到通知，但如果您不在通知范围内，则会显示“收到来自...的新消息”。

【参考方案1】：

您可以导出导航参考

export const navRef = React.createRef();

const App = () => 
  return (
    <NavigationContainer ref=navRef>
      ...
    </NavigationContainer>
  );
;

并使用它在 setNotificationHandler 中获取您所在的屏幕

const currentRouteName = navRef.current.getCurrentRoute().name;

可以使用类似的代码。此代码适用于 react-navigation v6

已编辑

对于 React-navigation v4 使用 onNavigationStateChange 创建一个跟踪当前屏幕的 reactRef。

export const currentScreenRef = React.createRef('Splash');

function getActiveRouteName(navigationState) 
  if (!navigationState) 
    return null;
  
  const route = navigationState.routes[navigationState.index];
  if (route.routes) 
    return getActiveRouteName(route);
  
  return route.routeName;


const App = () => 
  return (
    <NavigationContainer 
      onNavigationStateChange=(prevState, currentState) => 
        const currentRouteName = getActiveRouteName(currentState);
        currentScreenRef.current = currentRouteName;
      
    >
      ...
    </NavigationContainer>
  );
;

这样就可以称它为

const currentRouteName = currentScreenRef.current;

注意：没有经过测试，因为没有任何项目运行 V4。如果不起作用或需要编辑，请添加评论

【讨论】：

感谢您的回答，先生，我会尽快按照您所说的执行此操作，如果一切正常，我会在这里通知您！

此解决方案仅适用于反应导航 6，问题是我正在使用反应导航 4。我目前正在努力实施此解决方案。

我今天会尝试更新解决方案以包含 v4

将所有 3 个函数放在我有 navRef 的同一个文件中，导出 getCurrentRouteName() 并尝试通过导入在文件外部调用它，但它返回未定义，但我想出了另一个解决方案。将稍微编辑您的帖子。现在添加了一个使用来自导航 v4 的侦听器的解决方案，似乎对我有用！

得到了编辑，我想，在一个地方跟踪屏幕会更容易，并想出了在编辑部分添加的解决方案