reactjs - React Navigation 5 - 如何从 headerRight 导航？

Question

我仍然试图理解这个 react 导航 5.0。
仅供引用，我正在使用 expo，现在从一页导航到另一页没有问题，
问题是当我为 headerRight 放置导航时。
我将 headerRight 放在 Stack.Navigator 中，因为我希望可以从其他屏幕访问此按钮。

所以基本上问题是，
我想在 headerRight 中放置注销按钮，
但是当我尝试放置 navigation.navigate 时，它​​认为 undefined 不是一个对象(评估“_this.props”)

然后我尝试调用一个函数(handleClick)，
问题未定义也不是对象。

我可以知道我的代码有什么问题吗？

以下是我的完整代码:

import * as React from 'react';
import { Button, View, Text, TextInput, Image, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import LoginScreen from './src/pages/auth/Login';
import HomeScreen from './src/pages/auth/HomeScreen';

const Stack = createStackNavigator();


export default function App() {

  // handleClick = () => {
  //   this.props.navigation.navigate('Login');
  // }

  return (
    <NavigationContainer>
      <Stack.Navigator mode="modal" initialRouteName="Login" screenOptions={{
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerRight: () => (
          <Button
            // only alert is ok, the other is error.
            // onPress={() => alert('Success Logout!')}
            onPress={this.handleClick}
            // onPress={this.props.navigation.navigate('Home')}
            title="Logout"
            color="#fff"
          />
        ),

        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}>

        <Stack.Screen name="Login"
          name="Login"
          component={LoginScreen}
          options={{
            title: 'Simple Scorecard',
          }} />
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: 'Home Menu',
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

之前谢谢

Answer 1

你应该试试这个。
您通过转换属性 navigation 收到对路由器的引用 ( screenOptions )到一个函数。

screenOptions={({route, navigation}) => ({ // get reference to navigation
   headerRight: () => (
      <Button
        onPress={() => navigation.navigate('Home'); // call .navigate on navigation
      />
    )
  })}