在我下面的代码中,当我使用 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;
您无法访问导航,因为它尚未准备好。您可以为您的导航创建参考,然后导出它并在您想要的地方使用它。
// 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>
);
}
https://reactnavigation.org/docs/navigation-container#onstatechange
<NavigationContainer
onStateChange={(state) => console.log('New state is', state)}
>
{/* ... */}
</NavigationContainer>