react-native - 到达最后一个屏幕后对本机导航重置堆栈或选项卡做出反应

Question

大家，我对 react-native 有点概念。我在使用 react-navigation 时遇到问题。我的导航中有 2 个标签。在第一个选项卡中，我有 2 个屏幕（主页和供应商），在第二个选项卡中，我有 3 个屏幕（订单预览、订单确认、谢谢）。我第一次通过主页-> 供应商-> 订单预览-> 订单确认-> 谢谢。它的工作正常。第二次，当我通过 Home->Vendor->Thankyou（它直接移动到thankyou。）。我不确定，为什么我会得到这个。我正在分享我的代码。

我在文件中附加我的代码

请让我知道，如果我遗漏任何内容或为上述问题提出一些解决方案谢谢视频链接：https ://drive.google.com/file/d/12AMrm-HnNSv1r2TLmyAO-FE-34AchdR9/view?usp=sharing

import 'react-native-gesture-handler';
import React from "react";
import { Image } from "react-native";
import { TabBarItem } from "@components";
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Constants, Colors, Icons, Styles } from "@common";
import HomeScreen from "./screens/HomeScreen";
import VendorScreen from "./screens/VendorScreen";
import OrderPreviewScreen from "./screens/OrderPreviewScreen";
import OrderConfirmScreen from "./screens/OrderConfirmScreen";
import OrderThankyouScreen from "./screens/OrderThankyouScreen";

/// Router File Code
const HomeStack = createStackNavigator();
function HomeStackScreen() {
  return (
      <HomeStack.Navigator initialRouteName="Home">
        <HomeStack.Screen name="Home" component={HomeScreen} />
        <HomeStack.Screen name="Vendor" component={VendorScreen} />
      </HomeStack.Navigator>

  );
}

const CartStack = createStackNavigator();
function CartStackScreen() {
  return (
    <CartStack.Navigator initialRouteName="OrderPreview">
      <CartStack.Screen name="OrderPreview" component={OrderPreviewScreen} />
      <CartStack.Screen name="OrderConfirm" component={OrderConfirmScreen} />
      <CartStack.Screen name="OrderThankyou" component={OrderThankyouScreen} />
    </CartStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBarOptions={{activeTintColor: 'tomato', inactiveTintColor: 'gray',  }} >
        <Tab.Screen name="Home" component={HomeStackScreen}  />
        <Tab.Screen name="Cart" component={CartStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

// Home Screen
showVendorDetail={vendor_ID=>navigation.push(Constants.Screen.Vendor,{vendor_ID})}

//Vendor Screen
showOrderPreview={()=>navigation.navigate("Cart",{screen:"OrderPreview"})}

//Order Preivew
showOrderConfirm={()=>navigation.push(Constants.Screen.OrderConfirm)}
// Order Confirm
showOrderThankyou={()=>navigation.push(Constants.Screen.OrderThankyou)}
// Order Thankyou
showHome={()=>navigation.navigate("Home",{ screen: 'Home' })}

标签： react-nativewix-react-native-navigation