使用 expo-notifications 处理传入通知

Question

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

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 状态，因为这种通知处理发生在默认屏幕主函数之外，该函数涵盖所有变量并且还使用 props通过导航。禁止在那里调用 redux 挂钩，而且我无法访问我的导航状态，因为我无法访问我通过导航获得的 props 变量。

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

Answer 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 创建一个 reactRef，利用 onNavigationStateChange 跟踪当前屏幕。

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。如果不起作用或需要编辑，请添加评论

使用 expo-notifications 处理传入通知

Handle incomming notification with expo-notifications

react-native

redux

react-redux

expo

expo-notifications