Pourquoi ne parviens-je pas à lier l'écran des paramètres à l'écran de connexion/inscription après avoir cliqué sur le nom et je continue à recevoir l'erreur « non défini n'est pas une fonction » ?

Question

Je souhaite effectuer une tâche simple consistant à passer d'un écran à un autre, mais peu importe ce que je fais, cela ne fonctionne pas. J'ai installé React-navigation/stack et React-navigation/native-stack mais aucun d'eux ne fonctionne avec mon code existant, est-ce à cause des onglets ?

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

J'ai essayé de rechercher des tutoriels qui expliquent ce problème et tout leur code ressemble au mien, en changeant simplement le nom de mon fichier .js mais rien ne fonctionne.

Answer 1

Avez-vous essayé ce crochet

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>
    );
  }