React Navigation 5 - 如何从 headerRight 导航？

Question

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

所以基本上问题是，我想把注销按钮放在 headerRight 中，但是当我尝试放置 navigation.navigate 时，它 sait 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

你应该试试这个。

您通过将属性 screenOptions 转换为函数来接收对路由器 (navigation) 的引用。

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

Answer 2

我对此的回答。你必须传递“导航”，并将“选项”转换为函数

<Stack.Screen
      // some code ...
            options={({ navigation }) => ({
              headerRight: () => (
                <TouchableOpacity onPress={() => navigation.navigate("pageYouWantNavigateTo")} > 

     // some component ...
              
                </TouchableOpacity>
              ),
            })}
          />

React Navigation 5 - 如何从 headerRight 导航？

React Navigation 5 - How to navigate from headerRight?

reactjs

react-native

expo

react-navigation-v5