尝试从底部选项卡导航器的 header 访问屏幕时，undefined 不是 object（评估 'navigation.navigate'）

Question

我正在尝试在 react-navigation 的底部选项卡导航器的 header 内实现一个导航按钮：

<SafeAreaView style={styles.container}>
      <NavigationContainer linking={LinkingConfiguration}>
        <Stack.Navigator>

          <Stack.Screen 
          name="AppName"
          component={BottomTabNavigator}
          options={{
            headerRight: () => (
              <Button title="Profil" onPress={() => navigation.navigate('Profil')}/>
            ),
          }}
          />
          <Stack.Screen 
          name="Profil"
          component={ProfileScreen}          
          />

但是，我收到了标题中提到的错误。我已阅读有关它的文档，我相信它无法导航到此屏幕，因为它未嵌套在底部选项卡导航器中。我找不到将配置文件屏幕放在底部选项卡导航器中而不在底部选项卡中实际显示它的方法。我是否应该进一步尝试将屏幕添加到底部选项卡而不显示它（如果可能），还是有更好的选择？

感谢您的帮助！

Answer 1

我们可以使用本机堆栈导航器的 useNavigation 挂钩从导航器组件导航到嵌套屏幕。

import * as React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function MyBackButton() {
    const navigation = useNavigation();

    return (
        <Button
            title="Back"
            onPress={() => {
                navigation.goBack();
            }}
       />
    );
}

尝试从底部选项卡导航器的 header 访问屏幕时，undefined 不是 object（评估 'navigation.navigate'）

undefined is not an object (evaluating 'navigation.navigate') when trying to access a screen from the header of a bottom tab navigator

react-native

react-navigation