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

---------------------App.js--------------------

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是用大括号括起来的，所以后面得到props里面的参数导航