Блог

У меня есть навигатор нижней вкладки с двумя вложенными навигаторами стека, такими как этот:

 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 
     }
   }
 });