单击名称后，尝试将我的设置屏幕链接到登录/注册屏幕，为什么我总是得到"未定义不是函数"？

Question

我想做一个简单的任务，这是从一个屏幕到另一个，但无论我做什么，它不会工作。我已经安装了react-navigation/stack和react-navigation/native-stack，两者都不能与我所拥有的工作，是因为标签吗?

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

我试着找到教程来解释这个问题，他们所有的代码看起来都像我的，只是把名字换成了我的。js文件，没有任何工作。

Answer 1

你试过这个钩子了吗

const navigation = useNavigation();

import {useNavigation} from '@react-navigation/native';
const Settings = () => {
const navigation = useNavigation();
return (
<View style = {styles.container}>
<Button title = "LogIn/SignUp" onPress={() => navigation.navigate("LogInSignUp")}></Button>
</View>
);
}

Answer 2

你没有解构你的道具。你收到的道具是navigation。在你的情况下，你应该使用navigation.navigation.navigate。

这应该能解决问题

const Settings = ({ navigation }) => {
// ...
};