我不断收到 "navigation" 未定义的错误

Question

我正在尝试创建一个导航到另一个页面的登录按钮，但我不断收到“导航”未定义的错误

错误截图如下： screenshot here

screenshot here 那是应用程序组件：

export default function App({navigation}) {
  const { navigate } = this.props.navigation;
  return (
    
    <View style={styles.container}>
     
     <Image
        
        source={logo}
        style={styles.stretch}
      />
      <Image
        
        source={logo2}
        style={styles.stretch2}
      />
      
  
  <Button title="Login" style={[styles.buttonContainer, styles.loginButton,styles.top]} onPress={() => navigation.navigate("Details")} >
     <Text style={styles.loginText}>LOG IN</Text>
   </Button>  
   <TouchableHighlight style={[styles.buttonContainer2, styles.loginButton2,styles.top2]} >
     <Text style={styles.loginText2}>Register</Text>
   </TouchableHighlight>  
        <NavigationContainer>
          
  <Stack.Navigator >
  <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={Details} />
        </Stack.Navigator>
        
</NavigationContainer>
        </View>
    
  );
}

这里我在使用导航 Ref 方法后卡住了： link here

Answer 1

函数组件中没有this.props:

export default function App({navigation}) {
  const { navigate } = this.props.navigation;

这应该是

export default function App({navigation}) {
  const { navigate } = navigation;

请注意，您已经从函数签名中的道具中解构了导航

Answer 2

您的 App 组件是一个 React 挂钩，因此调用 this.props 将不起作用。您可以只使用应用程序参数中的 navigation。
导航道具仅适用于包装在 <NavigationContainer> 组件中的组件。尝试从 App 组件调用 navigate 可能仍然会出错，因为 <NavigationContainer> 是它的子组件。

你最好的选择是只在 <NavigationContainer> 中的组件上使用 navigation 道具，或者根据文档像这样访问它：

https://reactnavigation.org/docs/navigating-without-navigation-prop

编辑：如果你想访问导航容器之外的导航，你需要一个指向它的 ref。

import React, { useRef } from "react";

export default function App({}) {
    const navigationRef = useRef(null)

    // Then wherever you wanna call navigate you do this:
    // () => navigationRef.current.navigate("Details")
    // make sure you do a null check on navigationRef.current if you want to be extra safe

    return (
        <NavigationContainer ref={navigationRef}>
        ....
        </NavigationContainer>
    )
}

我不断收到 "navigation" 未定义的错误

I keep getting errors that "navigation" is not defined

react-native

expo

stack-navigator