React Navigation返回按钮显示导航器名称而非屏幕名称如何解决？

要解决返回按钮显示来源屏幕标题的问题，你可以通过以下两种方式实现，无需将Authentication导航器并入Root导航器：

方法一：自定义返回按钮并指定返回逻辑 #

在Authentication导航器的目标屏幕中，手动自定义headerLeft组件，直接指定返回按钮的标题和点击行为，让它回到Profile屏幕：

import { useNavigation, useLayoutEffect } from '@react-navigation/native';
import { HeaderBackButton } from '@react-navigation/elements';
import { View, Text } from 'react-native';

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

  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <HeaderBackButton
          title="Profile"
          onPress={() => navigation.getParent().navigate('Account', { screen: 'Profile' })}
        />
      ),
    });
  }, [navigation]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Auth Screen</Text>
    </View>
  );
}

方法二：跳转时传递来源标题，动态设置返回按钮 #

在Profile屏幕跳转时传递来源标题参数，再在Auth屏幕中读取参数并设置返回按钮标题：

1. Profile屏幕的跳转代码：

import { View, Text, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';

function ProfileScreen() {
  const navigation = useNavigation();
  
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Profile Screen</Text>
      <Button
        title="Go To Auth Navigator"
        onPress={() => navigation.navigate('Auth', { 
          screen: 'AuthScreen',
          params: { fromScreen: 'Profile' } 
        })}
      />
    </View>
  );
}

2. Auth屏幕设置返回按钮：

import { useNavigation, useRoute, useLayoutEffect } from '@react-navigation/native';
import { HeaderBackButton } from '@react-navigation/elements';
import { View, Text } from 'react-native';

function AuthScreen() {
  const navigation = useNavigation();
  const route = useRoute();
  const fromScreen = route.params?.fromScreen || 'Back';

  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: () => (
        <HeaderBackButton
          title={fromScreen}
          onPress={() => navigation.goBack()}
        />
      ),
    });
  }, [navigation, fromScreen]);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Auth Screen</Text>
    </View>
  );
}

原理说明 #

问题核心在于Authentication导航器是独立于Root导航器的嵌套导航器，从Root的Profile屏幕跳转到Auth屏幕时，React Navigation默认将返回目标设为Root导航器的根节点。通过自定义返回按钮，我们可以强制指定返回行为回到Profile屏幕，或通过参数传递动态设置返回按钮标题，让它显示来源屏幕名称。

内容的提问来源于stack exchange，提问作者Ben