navigation.navigate() doesn't work on my nested navigations-CodePudding

Here I'am testing with react navigation v6.

When I press "Go To Log-In" button,

it prints "navigation.navigate is not a function.

Here is my Main Navigation

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="User" component={MainStackNavigator} />
      <Drawer.Screen name="Notification" component={BottomTabNavigator} 
      options={ { headerTitle: props => <LogoTitle {...props} /> }}
      />
    </Drawer.Navigator>
  );
};

here is my one of my nested Navigation

const MainStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="Item" component={Items} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="LogIn" component={LogIn} />
      <Stack.Screen name="Detail" component={Detail} />
    </Stack.Navigator>
  );
};

const ContactStackNavigator = () => {
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="Profile" component={Profile} />
    </Stack.Navigator>
  );
};

Here is my Log in Button in a component named "Items"


export default function Items(navigation) {

  useEffect(() => {
    console.log("ITem navi: ", navigation);
  }, [])

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Items !</Text>
      <Button title="Go to Log-In" onPress={() => navigation.navigate('LogIn')} />
      <AccountList />
    </View>
  );
}

I'am stuck in this error for hours.

Please help me to solve it.

CodePudding user response：

You are accessing it the wrong way

this line

export default function Items(navigation) {

Should be

export default function Items({navigation}) {

Basically you will get all the props as a single parameter which you can destruct and access the navigation prop

CodePudding user response：

In your code complier don't know what is navigation so you need wrap that in porps params like below

export default function Items({navigation}) {