navigation.navigate不是一个函数。(在“navigation.navigate(”HomeScreen“)”中，“navigation.navigate”未定义)

Question

我在反应本土化方面是很新的，而且我正在收到这个错误。请帮忙！navigation.navigate is not a function. (In 'navigation.navigate("HomeScreen")', 'navigation.navigate' is undefined)

import { View, Text,Button,StyleSheet, TouchableOpacity } from 'react-native'
import React, {useState} from 'react'
import { NavigationContainer,CommonActions, useNavigation } from '@react-navigation/native';

const GetOtpButton = (navigation) => {
      return (
        <View >

          <TouchableOpacity style = {styles.button} onPress={() => navigation.navigate("HomeScreen") }  >
                        <Text style = {styles.text}>Log in</Text>

                    </TouchableOpacity>


        </View>
      )
    }
    const styles = StyleSheet.create({
        button: {
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: "white",
          width: "100%",
          height: 50,
          borderColor: "#E13C72",
          backgroundColor: "#E13C72",
          borderWidth: 0.1,
          borderRadius: 80,
          // marginBottom: 40,
          // marginVertical: 5,
          // marginTop: 10,
        },
        text: {
          justifyContent: 'center',
          textAlign: 'center',
          color: "white",
          fontWeight: 'bold'
        }
    });

    export default GetOtpButton

import react from "react";
import { StatusBar } from "expo-status-bar";
import { SafeAreaView, StyleSheet, Text, View, Dimensions } from "react-native";
import SigninScreen from "./src/SigninScreen/SigninScreen";
import HomeScreen from "./src/HomeScreen/HomeScreen";
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


const Stack = createNativeStackNavigator();

export default function App() {

  return (
     <NavigationContainer>
     <Stack.Navigator initialRouteName="SigninScreen" options={{headerShown: false}}>

     <Stack.Screen name = 'SigninScreen' component={SigninScreen}  options={{headerShown: false}}/>
     <Stack.Screen name = 'HomeScreen' component={HomeScreen}  options={{headerShown: false}}/>

     </Stack.Navigator>
    </NavigationContainer>


  );

}

const styles = StyleSheet.create({
  root: {},
  container: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#FFFFFF",
  },
});

Answer 1

在导航器中没有将组件GetOptButton定义为屏幕，因此导航框架不会自动将navigation对象传递给它。因此，您在这里有多个选择。

将其定义为导航器中的屏幕。

<Stack.Screen name = 'GetOpt' component={GetOptButton} />

该框架现在将导航对象传递给GetOptButton组件。您可以按以下方式访问它。

const GetOtpButton = ({navigation}) => { ... }

现在，由于GetOptButton似乎是一个组件，而不是您将导航到的屏幕，在导航器中定义它可能没有多大意义。

从使用GetOptButton 组件的导航器中定义的屏幕传递导航对象。

// this works, since `Homescreen` is defined as a screen in your navigator
const HomeScreen = ({navigation}) => {

  return (
   <GetOptButton navigation={navigation} />
  )
}

如上面所示，在GetOptButton中对导航对象进行重构。

对某些组件使用useNavigation钩子--从其父组件传递navigation对象可能没有意义，例如，如果组件是深度嵌套的。对于这种情况，您可以使用useNavigation钩子。

const GetOptButton = () => {

   const navigation = useNavigation()
}

Answer 2

您没有展示GetOtpButton是如何使用的，而是猜测导航是作为支柱传递给GetOtpButton的，您需要像这样进行导航

const GetOtpButton = ({navigation}) => {
  return (
    <View >

      <TouchableOpacity style = {styles.button} onPress={() => navigation.navigate("HomeScreen") }  >
                    <Text style = {styles.text}>Log in</Text>
                    
                </TouchableOpacity>
  
      
    </View>
  )
}

请注意，不同之处在于，navigation被花括号包围，因此稍后您将获得道具内部的参数导航。