Warum kann ich den Einstellungsbildschirm nicht mit dem Anmelde-/Registrierungsbildschirm verknüpfen, nachdem ich auf den Namen geklickt habe, und erhalte ständig die Fehlermeldung „Undefiniert ist keine Funktion“?

Question

Ich möchte eine einfache Aufgabe erledigen, nämlich von einem Bildschirm zum anderen zu springen, aber egal was ich mache, es funktioniert nicht. Ich habe „react-navigation/stack“ und „react-navigation/native-stack“ installiert, aber keines davon funktioniert mit meinem vorhandenen Code. Liegt es an den Registerkarten?

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

Ich habe versucht, nach Tutorials zu suchen, die dieses Problem erklären, und der gesamte Code sieht aus wie meiner. Ich habe nur den Namen in meine .js-Datei geändert, aber nichts hat funktioniert.

Answer 1

你试过这个钩子吗

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