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

Question

在我下面的代码中，当我使用useNavigation((时，它会给出一个类似于我的停顿的错误如何使用useNavigation，请任何人都能解决这个错误。。。错误：找不到导航对象。您的组件在导航器的屏幕内吗？我从这里开始执行代码https://rnfirebase.io/messaging/notifications#handling-交互

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;

Answer 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);
}

不管怎样，你都可以使用onReady回拨来表示你的导航已经准备好

// 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>
);
}

Answer 2

https://reactnavigation.org/docs/navigation-container#onstatechange

<NavigationContainer
onStateChange={(state) => console.log('New state is', state)}
>
{/* ... */}
</NavigationContainer>