this.props.navigation.navigation不工作(堆栈导航器)

Question

你好，请看一下这段代码。我有一个入口页面和一个主页。这是我的StackNavigator.js文件

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Entry from '../Screens/Entry';
import Home from '../Screens/Home';
const Stack = createStackNavigator();
const StackNavigator = () => {
return (
<NavigationContainer>
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="Entry" component={Entry} />
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default StackNavigator;

这是我的输入页面和尝试导航的按钮

export default function Entry(props){
return( <TouchableOpacity
onPress={() => this.props.navigation.navigate('Home')}
style={styles.logBtn}>
<Text style={{ fontFamily: 'Jost', color: '#1b4034' }}>
Login
</Text>
</TouchableOpacity> );
}

Answer 1

this用于类组件，而您使用的是功能组件。

像这样使用

props.navigation.navigate(...)