世博会推送通知不适用于堆栈导航，但可以在单个 App() 中使用

Question

我一直在尝试使用 ExpoPushNotifications 和 firebase FCM 在我的 React Native 应用程序中实现推送通知

当推送通知的所有配置都在 app() 组件内完成时，我已经能够获得一个非常简单的使用推送通知的应用程序。我已成功构建应用程序并安装在 Android 设备上，并通过应用程序收到的 FCM 发送推送通知。

一旦我向应用程序添加进一步的复杂性，即添加不同的导航堆栈（一个用于身份验证：登录、注册，一个用于经过身份验证：欢迎屏幕等）。停止接收世博会通知。没有任何错误，例如不正确的令牌等，据我所知，FCM 和 Expo 都在“发送”推送通知，只是应用程序没有注册。

我尝试将设置的通知从 App() 移至其他堆栈，但仍然没有成功。

我已经尝试用谷歌搜索这个一周了，但所有博览会推送通知示例都只包含 App() 作为单页应用程序，没有复杂性，并且与通知失败相关的所有问题都指向 FCM 和设置，我已经证明我的 FCM 和信用等设置与“基本”应用程序一样工作正常。

是否有人设置了具有多个不同屏幕的多导航堆栈应用程序，并且还具有与 Expo Notificiations 配合使用的推送通知？

Answer 1

• 首先，为通知创建上下文

  import { createContext } from 'react';
  
  const NotificationContext = createContext();
  
  export default NotificationContext;
  

• 然后，使用上下文提供程序包装您的应用程序并传递必要的函数和状态

  import React, { useState, useEffect } from 'react';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import { registerForPushNotificationsAsync } from './registerForPushNotifications';
  import { NotificationContext } from './NotificationContext';
  import SignInScreen from './screens/SignInScreen';
  import SignUpScreen from './screens/SignUpScreen';
  import WelcomeScreen from './screens/WelcomeScreen';
  
  const Stack = createStackNavigator();
  
  export default function App() {
   const [notification, setNotification] = useState(null);
   const [expoPushToken, setExpoPushToken] = useState('');
  
  useEffect(() => {
    registerForPushNotificationsAsync().then(token => {
      setExpoPushToken(token);
    });
  }, []);
  
   return (
    <NotificationContext.Provider value={{ notification, setNotification }}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="SignIn" component={SignInScreen} />
          <Stack.Screen name="SignUp" component={SignUpScreen} />
          <Stack.Screen name="Welcome" component={WelcomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </NotificationContext.Provider>
   );
  }
  

• 完成上述过程并完成屏幕设置后，您可以使用 useContext 挂钩访问通知状态和功能。

  import React from 'react';
  import { View, Text, Button } from 'react-native';
  import { NotificationContext } from '../NotificationContext';
  
  function WelcomeScreen() {
   const { notification, setNotification } = React.useContext(NotificationContext);
  
   return (
    <View>
      <Text>Welcome to the app!</Text>
      {notification && <Text>Notification: {notification.data.body}</Text>}
      <Button title="Clear Notification" onPress={() => setNotification(null)} />
    </View>
   );
  }
  
  export default WelcomeScreen;
  

这样，您就可以从应用程序中的任何组件管理通知状态和功能