如何在react-navigation 6中导航到另一个导航器中的屏幕

Question

我有一个具有三层嵌套导航器的应用程序结构（您可以检查我下面提供的代码）。我无法从最后一级导航“AccountDetails”到达“Home”。当我点击按钮时，我什么也得不到，没有日志，没有导航，什么也没有。这确实感觉像是图书馆中的一个错误，但我不能排除我可能错过了一些东西。这是怎么回事？

这是代码：

type RootStackParamList = {
  SignIn: undefined;
  SignUp: undefined;
  Home: undefined;
};

type HomeTabParamList = {
  BudgetTab: undefined;
  AccountsTab: undefined;
  SettingsTab: undefined;
};

type AccountStackParamList = {
  Accounts: undefined;
  AccountDetails: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator<HomeTabParamList>();
const AccountStack = createNativeStackNavigator<AccountStackParamList>();

const AccountDetails = ({ navigation }: any) => {
  return (
    <View>
      <Text>Account Details</Text>
      <Button
        onPress={() => {
          navigation.navigate("Home");
        }}
      >
        Go home
      </Button>
    </View>
  );
};

const Accounts = ({ navigation }: any) => {
  return (
    <View>
      <Text>Accounts</Text>
      <Button
        onPress={() => {
          navigation.navigate("AccountDetails");
        }}
      >
        View details
      </Button>
    </View>
  );
};

const BudgetTab = ({ navigation }: any) => {
  return (
    <View>
      <Button
        onPress={() => {
          navigation.navigate("SettingsTab");
        }}
      >
        Sign Up
      </Button>
      <Text>Budget</Text>
    </View>
  );
};
const SettingsTab = () => {
  return (
    <View>
      <Text>Settings</Text>
    </View>
  );
};
const AccountsTab = () => {
  return (
    <AccountStack.Navigator>
      <AccountStack.Screen name="Accounts" component={Accounts} />
      <AccountStack.Screen name="AccountDetails" component={AccountDetails} />
    </AccountStack.Navigator>
  );
};

const SignIn = () => {
  return (
    <View>
      <Text>Sign In</Text>
    </View>
  );
};
const SignUp = () => {
  return (
    <View>
      <Text>Sign Up</Text>
    </View>
  );
};
const HomeTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="BudgetTab" component={BudgetTab} />
      <Tab.Screen name="AccountsTab" component={AccountsTab} />
      <Tab.Screen name="SettingsTab" component={SettingsTab} />
    </Tab.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeTabs} />
        <Stack.Screen name="SignIn" component={SignIn} />
        <Stack.Screen name="SignUp" component={SignUp} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Answer 1

使用

popToTop

转到当前选项卡。

navigation.popToTop()

在

navigate

中定义一个选项卡（屏幕）以转到任何其他选项卡。

navigation.navigate('Home', { screen: 'BudgetTab' });