为什么路由对象有时有状态有时没有 - 在 react-navigation v5 中

Question

开始：

<NavigationContainer>
      <Stack.Navigator>
        {
          isLoading ? <Stack.Screen name="AuthLoadingScreen" component={AuthLoadingScreen} />
          : (
          user ? (
            <Stack.Screen  name="AuthenticatedStack" component={AuthenticatedStack} options={{headerShown: false}} />
            ) : (
              <Stack.Screen  name="NotAuthenticatedStack" component={NotAuthenticatedStack} options={{headerShown: false}} />
            )
          )
        }
      </Stack.Navigator>
    </NavigationContainer>

认证堆栈：

const AuthenticatedStack = () => {
  return (
    <Drawer.Navigator initialRouteName="MainStack" drawerContent={props => <SideBar {...props} />}>
        <Stack.Screen name="MainStack" component={MainStack} options={({route}) => ({
            headerShown: shouldHeaderBeShown(route),title: getHeaderTitle(route),
          })} />
      </Drawer.Navigator>
  );
};

主堆栈包含带有选项卡导航器和其他导航器的主屏幕，我计划从侧面菜单按钮导航到这些导航器：

const MainStack = () => {
  return (
    <Stack.Navigator>
          <Stack.Screen name="main" component={MainTabNavigator} options={({route}) => ({
            headerShown: shouldHeaderBeShown(route),title: getHeaderTitle(route),
          })} />
          <Stack.Screen options={({route}) => ({
            title: getHeaderTitle(route),
          })} name="Welcome" component={WelcomeStack} />
        </Stack.Navigator>
  );
};

主选项卡导航器只是几个选项卡：

const MainTabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
...

主页堆栈导航器：

const HomeStackNavigator = ({navigation, routes}) => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} options={{
          headerLeft: () => (),
        }} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
};
Welcome stack:
const WelcomeStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen options={({route}) => ({
        headerShown: shouldHeaderBeShown(route),title: getHeaderTitle(route),
      })} name="welcome" component={WelcomeScreen} />
    </Stack.Navigator>
  );
};

我使用这两个函数来显示隐藏标题以在选项卡上避免双标题并设置标题：

function shouldHeaderBeShown(route) {
  const routeName = route.state ? route.state.routes[route.state.index].name : 'Home';

  switch (routeName) {
    case 'Home': return false;
  }
}

function getHeaderTitle(route) {
  const routeName = route.state ? route.state.routes[route.state.index].name : 'Home';

  switch (routeName) {
    case 'Home': return 'Home';
    case 'Settings': return 'Settings';
    case 'Welcome': return 'Welcome';
  }
}

在这里我遇到了问题：
这一行：route.state ? route.state.routes[route.state.index].name如果我在选项卡之间切换，我会得到所有正确的state属性，并且设置了很好的标题。
但是如果我从抽屉导航到Welcome然后route没有state财产所以它总是选择“家”作为标题。
我通过将此行设置为：

const routeName = route.state ? route.state.routes[route.state.index].name : route.name;

然后它显示Welcome标题。
但我不明白这种解决方法是否可行，或者可以以更好的方式设置此屏幕？

Answer 1

但是如果我从抽屉导航到欢迎

如何从抽屉中导航？如果您通过传递screen参数进行导航，则可以执行以下操作：

function getActiveRouteName(route) {
  // Access the tab navigator's state using `route.state`
  const routeName = route.state
    ? // Get the currently active route name in the tab navigator
      route.state.routes[route.state.index].name
    : // If state doesn't exist, we need to default to `screen` param if available, or the initial screen
      // In our case, it's "Home" as that's the first screen inside the navigator
      route.params?.screen || 'Home';

  return routeName;
}

似乎你甚至需要这个的原因是因为你有很多嵌套的导航器。也许首先尝试减少嵌套？https://reactnavigation.org/docs/en/nesting-navigators.html#best-practices-when-nesting