Mengapa saya tidak dapat memautkan skrin tetapan ke skrin log masuk/pendaftaran selepas mengklik nama dan terus mendapat ralat "undefined is not a function"?

Question

Saya ingin melakukan tugas mudah melompat dari satu skrin ke skrin yang lain tetapi tidak kira apa yang saya lakukan ia tidak berkesan. Saya telah memasang react-navigation/stack dan react-navigation/native-stack tetapi kedua-duanya tidak berfungsi dengan kod sedia ada saya, adakah ia disebabkan oleh tab?

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Tabs from './navigation/tabs';
import "react-native-url-polyfill/auto"
import LogInSignUp from './SettingsScreen/LogInSignUp';


const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
          <Stack.Navigator screenOptions={{ headerShown: false }}>
            <Stack.Screen name="Home" options={{title: "Welcome"}} component={Tabs} />
            <Stack.Screen name="Settings" component={Tabs} />
            <Stack.Screen name = "LogInSignUp" component={LogInSignUp}/>
          </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

import { Text, StyleSheet, View, Button, } from "react-native";
import { StatusBar } from "expo-status-bar";


const Settings = (navigation) => {
    return (
      <View style = {styles.container}>
        <Button title = "LogIn/SignUp" onPress={() => navigation.navigate("LogInSignUp")}></Button>
      </View>
      
    );
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
    
  })

export default Settings

import React from 'react'
import { StackActions } from '@react-navigation/native';

const LogInSignUp = (navigation) => {
  return (
    <div>LogInSignUp</div>
  )
}

export default LogInSignUp

Saya cuba mencari tutorial yang menerangkan masalah ini dan semua kod mereka kelihatan seperti saya, hanya menukar nama kepada fail .js saya tetapi tiada apa yang berjaya.

Answer 1

Sudahkah anda mencuba cangkuk ini

const navigation = useNavigation();

import {useNavigation} from '@react-navigation/native';

const Settings = () => {
const navigation = useNavigation();
    return (
      <View style = {styles.container}>
        <Button title = "登录/注册" onPress={() => navigation.navigate("LogInSignUp")}></Button>
      </View>
    );
  }