reactjs - 为什么路由对象有时有状态有时没有 - 在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 属性，因此它总是选择“Home”作为标题。
我通过将此行传递给:

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

然后显示欢迎标题。
但我不明白这个解决方法可以吗？或者这个屏幕可以以更好的方式设置吗？

Answer 1

But If I from drawer navigate to Welcome

如何从抽屉中导航？如果您通过传递 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