React Native 嵌套导航意外行为

Question

我在世博会管理的项目中使用“react-navigation/native”，并且我使用“react-navigation/native-stack”和“react-navigation/bottom-tabs”构建了导航结构，如下所示：

    <Stack.Navigator screenOptions={commonHeaderStyle}>
      {username && IdUser ? //If the user is not logged in its data isn't present
        <Stack.Screen
          name="DefaultLogged"
          component={TabNavigator}
          initialParams={{IdUser, username}}
          options={{headerShown: false}}
        />  
        : 
        <Stack.Screen
          name="DefaultHome"
          component={DefaultScreen}
          options={(props) => ({
            headerShown: true,
            header: () => (<HomeHeader navigation={props.navigation} />),
          })}
        />
      }
      <Stack.Screen
        name="Default"
        component={DefaultScreen}
        options={(props) => ({
          headerShown: true,
          header: () => (<HomeHeader navigation={props.navigation} />),
        })}
      />
      <Stack.Screen
        name="Logged"
        component={TabNavigator}
        initialParams={{IdUser:null, username:null}}
        options={{headerShown: false}}
      />
    </Stack.Navigator>

TabNavigator 如下：

    <Tab.Navigator>
      <Tab.Screen
        name="ProfileRoot"
        component={ProfileRoot}
        initialParams={{IdUser, username}}
        options={{title: 'Perfil', headerShown: false}}
      />
      <Tab.Screen
        name="WorkersRoot"
        component={WorkersRoot}
        options={{ title: 'Trabajadores', headerShown: false}}
      />
    </Tab.Navigator>

而我的ProfileRoot和WorkersRoot组件分别是：

    <Stack.Navigator screenOptions={commonHeaderStyle}>
      <Stack.Screen
        name="Profile"
        component={ProfileScreen}
        options={{title: 'Perfil'}}
      />
      <Stack.Screen
        name="UserReviews"
        component={UserReviewsScreen}
        initialParams={{ category: null, IdUser, username}}
        options={({ route }) => ({ title: `Reseñas de ${route.params.category}` })}
      />      <Stack.Screen
        name="WorkersForm"
        initialParams={{IdUser, username}}
        component={WorkerFormScreen}
        options={{title: 'Subir oficio'}}
      />
      <Stack.Screen
        name="User"
        component={UserScreen}
        initialParams={{ IdUser: null, username: null }}
        options={({ route }) => ({ title: `Perfil de ${route.params.username}`})}
      />
    </Stack.Navigator>

    <Stack.Navigator screenOptions={commonHeaderStyle}>
      <Stack.Screen
        name="WorkersCategories"
        component={CategoriesScreen}
        initialParams={{ type: 'trabajador' }}
        options={{title: 'Encontrar trabajador' }}
      />
      <Stack.Screen
        name="Workers"
        component={WorkersScreen}
        initialParams={{ category: null }}
      />
    </Stack.Navigator>

我的主要问题是，当我导航到 WorkersRoot 和 Workers 屏幕时，我有一个操作将我发送到 ProfileRoot 和带有一些参数的用户屏幕。示例功能：

navigation.navigate('ProfileRoot', { screen: 'User',
    params: { IdUser: worker.id_user, username: worker.username }})

当我点击返回按钮或按 Tab 图标将我发送到 ProfileRoot 堆栈中的第一个屏幕时，我会正确发送到该屏幕，但是当我按 WorkersRoot 选项卡的图标并再次按 ProfileRoot 选项卡（以按预期返回到“配置文件”屏幕，而是渲染“用户”屏幕。因此，一旦我从 WorkersRoot 选项卡导航到“用户”屏幕，似乎就无法从 ProfileRoot 堆栈中丢弃此屏幕。

这是显示该错误的视频链接

我尝试过的： -每次从 WorkersRoot 重定向到 ProfileRoot 时，使用调度重置导航

预期行为：在选项卡之间正确导航

Answer 1

我不小心解决了我的问题。 将代码重构为：

navigation.navigate( 'User', { IdUser: worker.id_user, username: worker.username })

完成了工作。我不明白为什么在指定选项卡根时会出现错误。