如何解决这个问题？ navigation.navigate 不是函数

Question

使用导航时出现此错误。我不明白你为什么要那样做。尝试通过导航从 HomeScreen 导航到 SignUp Detail 时会发生上述错误。我到处都看过，但我在问，因为我找不到答案。使用导航时会发生此错误。我不明白你为什么要那样做。尝试通过导航从 HomeScreen 导航到 SignUp Detail 时会发生上述错误。我到处都看了，但我问是因为我找不到答案。

此代码App.js




import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import SignUp from "./components/signupdetail/signup";
import HomeScreen from "./components/homeScreen";

const Stack = createStackNavigator();

const App = () => {

  return (
    <>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="SignUp" component={SignUp} /> //my problem
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

export default App;

此代码主屏幕


import Login from "./loginScreen/login";
import ButtonComponent from "./loginScreen/button";
import LostPassword from "./loginScreen/lostpassword";
import SocialLogin from "./loginScreen/sociallogin";
import SignUp from "./loginScreen/signup";
const HomeScreen = (props) => {
 

  return (
    <>
      <SafeAreaView style={styles.container}>
        <Text style={styles.header}>everywear</Text>
      </SafeAreaView>
      <View>
        <Login />
        <ButtonComponent />
        <LostPassword />
        <SocialLogin />
        <SignUp navigation={props} />
      </View>
    </>
  );
};

export default HomeScreen;

此代码注册


import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const SignUp = (props) => {
 
  const { navigation } = props;
  return (
    <>
      <View style={styles.container}>
        <Text style={styles.text}>혹시 처음이신가요?</Text>
        <TouchableHighlight
          onPress={() => {
            navigation.navigate("SignUp");
          }}
          underlayColor="gray"
          style={styles.button}
        >
          <>
            <Text style={styles.signuptext}>회원가입</Text>
          </>
        </TouchableHighlight>
      </View>
    </>
  );
};

export default SignUp;

Answer 1

有多种方法可以解决此问题。

最简单的方法是像下面这样改变

 <SignUp navigation={props.navigation} />

这将正确传递导航道具，其余代码将按预期工作。

useNavigation 挂钩

你可以像下面这样使用钩子

const SignUp = (props) => {
 
  const navigation = useNavigation();

那么就不需要传递父级的 prop 了。

如何解决这个问题？ navigation.navigate 不是函数

how fixed this issue? navigation.navigate is not a function

react-native

react-navigation