как перейти к указанному c экрану после нажатия уведомления rnfirebase

Question

Я использую собственную базу реагирования и получаю уведомления всякий раз, когда это необходимо, и в этих уведомлениях есть некоторые данные для перехода на конкретный экран c. я использовал документацию firebase для реализации функциональности, но она не работает, как и предполагалось

Вот документ, который я использовал Firebase & React-Navigation и мой код выглядит примерно так:

const Stack = createStackNavigator();
const Router = () => {
    const navigation = useNavigation();
    const [loading, setLoading] = useState(true);
    const [initialRoute, setInitialRoute] = useState('Splash');

useEffect(() => {
    //fcm
    registerAppWithFCM();
    // checkRNFBPermission();

    const unsubscribe = messaging().onMessage(async remoteMessage => {
        console.log('remote DATAAAAAAAAAAAAAAAAAAAAAAAA : ',remoteMessage.data);
        // switch (remoteMessage.data.screen) {
        //     case 'answer':{
        //         console.log('inside switch condition 1 !!!!!!!!!!!!!');
        //         useNavigation().navigate('Profile');
        //         break;
        //     }
        //     case 'AnswerQuestion':{
        //         console.log('inside switch condition 2 !!!!!!!!!!!!!');
        //         useNavigation().navigate('Profile');
        //         break;
        //     }

        //     default:
        //         break;
        // }
        // Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
        // const owner = JSON.parse(remoteMessage.data.owner);
        // const user = JSON.parse(remoteMessage.data.user);
        // const picture = JSON.parse(remoteMessage.data.picture);
    });

    // Assume a message-notification contains a "type" property in the data payload of the screen to open
   messaging().onNotificationOpenedApp(remoteMessage => {
      console.log(
        'Notification caused app to open from background state:',
        remoteMessage.notification,
      );
      navigation.navigate('Profile');

    });
    //  Check whether an initial notification is available
    messaging()
    .getInitialNotification()
    .then(remoteMessage => {
      if (remoteMessage) {
        console.log(
          'Notification caused app to open from quit state:',
          remoteMessage.data, //notification
        );
      }
      setLoading(false);
    });

    messaging().setBackgroundMessageHandler(async remoteMessage => {
        console.log('Message handled in the background!', remoteMessage);
    });

    return unsubscribe;
    //fcm
}, []);

//fcm
checkRNFBPermission = async() => {
    const enabled = await messaging().hasPermission();
    if(enabled){
        messaging()
        .getToken()
        .then(token => {
            // console.log('deviceeeee fcm token ------> ', token);
        });    
    }else{
        requestUserPermission();
    }
}
registerAppWithFCM = async() => {
    await messaging().registerDeviceForRemoteMessages();
}
requestUserPermission = async() =>  {
    const settings = await messaging().requestPermission();
    if (settings) {
        console.log('Permission settings:', settings);
    }
}
//fcm

renderLoading = () => (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'  }}>
        <Text>Domanda</Text>
        <ActivityIndicator size='large' color={colors.darkerTeal} />
    </View>
);

//firebase
if (loading) {
    return null;
}
//firebase
return(
    <Provider store={store}>
        <PersistGate persistor={persistor} loading={this.renderLoading()}>
            <Root>
                <NavigationContainer>
                    <Stack.Navigator initialRouteName={initialRoute} headerMode="none">
                        <Stack.Screen name="Splash" component={Splash} />
                        <Stack.Screen name="Login" component={Login} />
                        <Stack.Screen name="Main" component={Main} />
                        <Stack.Screen name="AppIntro" component={AppIntro} />
                        <Stack.Screen name="Tags" component={Tags} />
                        <Stack.Screen name="Answers" component={Answers} />
                        <Stack.Screen name="Profile" component={Profile} />
                        <Stack.Screen name="EditInfo" component={EditInfo} />
                        <Stack.Screen name="ChangePassword" component={ChangePassword} />
                        <Stack.Screen name="AnswerQuestion" component={AnswerQuestion} />
                        <Stack.Screen name="ContactUs" component={ContactUs} />
                    </Stack.Navigator>
                </NavigationContainer>
            </Root>
        </PersistGate>
    </Provider>
)

};

export default Router;

, но когда я добавляю usenavigation и хочу использовать его, он выдает эту ошибку: Ошибка: мы не смогли найти объект навигации. Ваш компонент находится внутри экрана в навигаторе?

Я не могу использовать navigation.navigate('Profile'); для перехода к указанному c экрану .

Answer 1

Вы получаете сообщение в приложении. js Что находится за пределами вашего StackNavigator. Вы можете использовать ссылку для использования свойства навигации навигатора

, чтобы определить навигатор в верхней части приложения. js

var navigator = null;

, а затем добавить ссылку на навигатор

<Stack.Navigator 
  initialRouteName={initialRoute}
  headerMode="none"
   ref={nav => {
     navigator = nav;
   }}
 >

и pu sh ваш маршрут внутри метода приема

navigator.dispatch(
  NavigationActions.navigate({
     routeName: 'theRoute',
       params: {},
   }),
 );