找不到导航对象。您的组件是不是在导航器的屏幕内？

Posted 2023-02-16

【中文标题】找不到导航对象。您的组件是不是在导航器的屏幕内？

【英文标题】：Couldn't find a navigation object. Is your component inside a screen in a navigator?找不到导航对象。您的组件是否在导航器的屏幕内？

【发布时间】：2021-04-10 06:07:46

【问题描述】：

在我下面的代码中，当我使用 useNavigation() 时，它会给出一个错误，比如我的问题 如何使用useNavigation，请任何人都可以解决这个错误... 错误：找不到导航对象。您的组件是否在导航器的屏幕内？ 我按照这里的代码https://rnfirebase.io/messaging/notifications#handling-interaction

import React, useState, useEffect  from 'react';
import messaging from '@react-native-firebase/messaging';
import  NavigationContainer, useNavigation  from "@react-navigation/native";
import  createStackNavigator, HeaderTitle,  from "@react-navigation/stack";
const Stack = createStackNavigator();

function App(props) 
     const navigation = props.navigation
    //const navigation = useNavigation();
    const [initialRoute, setInitialRoute] = useState('Splash Screen');

    useEffect(() => 
        messaging().onMessage(remoteMessage => 
            navigation.navigate("Description Screen");
            console.log(props.navigation)
        );
    , []);

    return (
        <NavigationContainer>
            <Stack.Navigator
                initialRouteName=initialRoute
                headerMode="none"
                screenOptions=
                    gestureEnabled: true,

                
            >

                <Stack.Screen name="Splash Screen" component=SplashScreen />
                <Stack.Screen name="Description Screen" component=DescriptionScreen />
            </Stack.Navigator>

        </NavigationContainer>

    );


export default App;

【问题讨论】：

您找到解决方案了吗？我遇到了同样的问题。

【参考方案1】：

您无法访问导航，因为它还没有准备好。您可以为您的导航创建 Ref，然后将其导出并在您想要的地方使用它。

// App.js

import  NavigationContainer  from '@react-navigation/native';
import  navigationRef  from './RootNavigation';

export default function App() 
  return (
    <NavigationContainer ref=navigationRef>/* ... */</NavigationContainer>
  );

`

然后你可以通过定义和导出你的方法来使用它

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) 
  navigationRef.current?.navigate(name, params);

您可以通过任何方式使用onReadycall back 表示您的导航已准备就绪

// App.js

import  NavigationContainer  from '@react-navigation/native';
import  navigationRef, isReadyRef  from './RootNavigation';

export default function App() 
  React.useEffect(() => 
    return () => 
      isReadyRef.current = false
    ;
  , []);

  return (
    <NavigationContainer
      ref=navigationRef
      onReady=() => 
        isReadyRef.current = true;
      
    >
      /* ... */
    </NavigationContainer>
  );

【讨论】：

您忘记了上述解决方案中的 isReadyRef 实现

export const isReadyRef = React.createRef();

如前所述，这并不完整，尚未更新。因此，我将在此处放置原始文档的链接，以防有人遇到与我相同的问题。 IT 建议采用非常相似的方法。 reactnavigation.org/docs/navigating-without-navigation-prop

【参考方案2】：

UseNavigation() 提供对作为屏幕一部分的组件内部的导航对象的访问。由于您使用的是 app()，我认为它是主屏幕本身，它未在堆栈导航器中定义，因此 useNavigation 将不起作用。它可以在堆栈导航器中定义的屏幕中工作，例如描述屏幕和启动屏幕。在这里你可以使用这个

function app(props)
    const navigation = props.navigation
    //Rest of your code

这应该会有所帮助。

【讨论】：

它得到一个错误 TypeError: undefined is not an object (evaluating 'navigation.navigate')

尝试console.log(props.navigation)看是否定义了。

它没有定义它的未定义

您可以发布包含更改的更新代码吗？

我刚刚编辑了我的代码，你可以在上面的代码中看到