typescript - React Navigation 5 - 嵌套导航无法导航

Question

我有一个带有两个嵌套堆栈导航器的底部选项卡导航器，如下所示：

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createStackNavigator } from "@react-navigation/stack";
import { NavigatorScreenParams } from "@react-navigation/native";

type BottomTabParams = {
  ScreenA: undefined;
  ScreenB: NavigatorScreenParams<StackBParams>;
};

const BottomTab = createBottomTabNavigator<BottomTabParams>();
const BottomTabNavigator = () => {
  return (
    <BottomTab.Navigator initialRouteName="ScreenA">
      <BottomTab.Screen name="ScreenA" component={StackANavigator} />
      <BottomTab.Screen name="ScreenB" component={StackBNavigator} />
    </BottomTab.Navigator>
  );
};

export type StackAParams = {
  ScreenA: NavigatorScreenParams<BottomTabParams>;
  ScreenADetails: IADetailsData;
};

const StackA = createStackNavigator<StackAParams>();
const StackANavigator = () => {
  return (
    <StackA.Navigator screenOptions={{ headerShown: false }}>
      <StackA.Screen name="ScreenA" component={AScreen} />
      <StackA.Screen name="ScreenADetails" component={ADetailsScreen} />
    </StackA.Navigator>
  );
};

export type StackBParams = {
  ScreenB: undefined;
  ScreenBDetails: IBDetailsData;
};

const StackB = createStackNavigator<StackBParams>();
const StackBNavigator = () => {
  return (
    <StackB.Navigator screenOptions={{ headerShown: false }}>
      <StackB.Screen name="ScreenB" component={BScreen} />
      <StackB.Screen name="ScreenBDetails" component={BDetailsScreen} />
    </StackB.Navigator>
  );
};

export default BottomTabNavigator;

现在，ADetailsScreen我想导航到BDetailsScreen，如下所示：

const ADetailsScreen: FunctionComponent<StackScreenProps<StackAParams, "ScreenADetails">> = ({
  navigation,
  route,
}) => {

  const onPress = () => {
     navigation.navigate("ScreenA", { 
       screen: "ScreenB", 
       params: { 
         screen: "ScreenBDetails", 
         params: detailsData 
       }
     });
  }

  return (...);
}

但是，这不起作用，我只是导航到ScreenA. 我究竟做错了什么？

更新：

我的底部标签导航也在堆栈导航器中：

const Stack = createStackNavigator<RootStackParams>();
const RootNavigator = () => {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Root" component={BottomTabNavigator} />
      <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: "Oops!" }} />
    </Stack.Navigator>
  );
};

但是，以下内容也不起作用：

 navigation.navigate("ScreenA", { 
   screen: "Root", 
   params: { 
     screen: "ScreenB", 
     params: { 
       screen: "ScreenBDetails", 
       params: detailsData 
     }
   }
 });

标签： typescriptreact-nativereact-navigationreact-navigation-v5