javascript - React Navigation v6 最佳结构

Question

我正在研究 react-navigation v6 并且想知道以下两个结构是否在性能方面有所不同，特别是因为我正在对详细信息屏幕进行深度链接。
第一个结构:

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();  

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
      <Tab.Screen name="Orders" component={OrderScreen} />
    </Tab.Navigator>
  );
}
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeTabs} />
        <Stack.Screen name="FeedDetails" component={FeedDetails} />
        <Stack.Screen name="ProfileDetails" component={ProfileDetails} />
        <Stack.Screen name="AccountDetails" component={AccountDetails} />
        <Stack.Screen name="OrderDetails" component={OrderDetails} />  
      </Stack.Navigator>
    </NavigationContainer>
  );
}

第二种结构:

const FeedStack = createNativeStackNavigator();
const ProfileStack = createNativeStackNavigator();
const AccountStack = createNativeStackNavigator();
const OrderStack = createNativeStackNavigator();

function FeedStackScreen() {
  return (
    <FeedStack.Navigator>
      <FeedStack.Screen name="FeedScreen" component={FeedScreen} />
      <FeedStack.Screen name="FeedDetails" component={FeedDetails} />
    </FeedStack.Navigator>
  );
}

function ProfileStackScreen() {
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="ProfileScreen" component={ProfileScreen} />
      <ProfileStack.Screen name="ProfileDetails" component={ProfileDetails} />
    </ProfileStack.Navigator>
  );
}

function AccountStackScreen() {
  return (
    <AccountStack.Navigator>
      <AccountStack.Screen name="AccountScreen" component={AccountScreen} />
      <AccountStack.Screen name="AccountDetails" component={AccountDetails} />
    </AccountStack.Navigator>
  );
}

function OrderStackScreen() {
  return (
    <OrderStack.Navigator>
      <OrderStack.Screen name="OrderScreen" component={OrderScreen} />
      <OrderStack.Screen name="OrderDetails" component={OrderDetails} />
    </OrderStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Feed" component={FeedStackScreen} />
        <Tab.Screen name="Profile" component={ProfileStackScreen} />
        <Tab.Screen name="Account" component={AccountStackScreen} />
        <Tab.Screen name="Order" component={OrderStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 1

根据您的要求，您发布的两种结构都很好。他们产生 2 种不同类型的 UI，所以更好的完全取决于您想要什么样的 UI。
在第一个(根目录下的堆栈，第一个屏幕中的选项卡)中，当您导航到其他屏幕时，选项卡栏在这些屏幕上不可见。因此，如果这是您想要的 UI，请使用第一个。
在第二个中，(根目录下的选项卡，每个选项卡内嵌套的堆栈)，当您导航到其他屏幕时，选项卡栏仍然存在。因此，如果您想要这种行为，请使用第二个。