navigation.navigate() 不适用于我的嵌套导航答案

【问题标题】：navigation.navigate() doesn't work on my nested navigationsnavigation.navigate() 不适用于我的嵌套导航
【发布时间】：2023-04-02 09:47:01
【问题描述】：

这里我正在使用 react navigation v6 进行测试。

当我按下“转到登录”按钮时，

它打印“navigation.navigate 不是一个函数。

这是我的主导航

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

这是我的嵌套导航之一

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

这是我在名为“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>
  );
}

我在这个错误中被困了好几个小时。

请帮我解决。

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

你访问的方式不对

这一行

export default function Items(navigation) {

应该是

export default function Items({navigation}) {

基本上你会得到所有的道具作为一个参数，你可以破坏和访问导航道具

【讨论】：

【解决方案2】：

在您的代码编译器中不知道什么是导航，因此您需要将其包装在如下所示的 porps 参数中

export default function Items({navigation}) {

【讨论】：