React Navigation v6 最佳结构答案

【问题标题】：React Navigation v6 Best StructureReact Navigation v6 最佳结构
【发布时间】：2021-11-22 01:32:13
【问题描述】：

我正在研究 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>
  );
}

【问题讨论】：

我认为第二个更好。它也在官方文档中。
@NajamUsSaqib 第一个也在他们的文档中
我个人更喜欢第 2 种，因为它使用简洁的代码更容易理解。你会有适当的层次结构。
感谢您的输入@NajamUsSaqib，我在 react-navigation v4 中使用了第二个结构，并且在嵌套堆栈的 Android 中遇到了一些性能（内存泄漏）问题，这就是这个问题。就个人而言，我喜欢第一个，因为代码更少，直接深度链接，但不确定它是否会影响性能。
我也更喜欢第二种结构，它干净易读。我还建议您在项目中使用 typescript，因为当您进行深度嵌套并传递一些路由参数时，它会为您提供更多功能。您可以对参数和路由名称进行非常有用的静态类型

标签： javascript react-native react-navigation

【解决方案1】：

根据您的要求，您发布的两种结构都很好。它们产生 2 种不同类型的 UI，因此更好的完全取决于您想要哪种 UI。

在第一个（根目录下的堆栈，第一个屏幕中的标签）中，当您导航到其他屏幕时，标签栏在这些屏幕上不可见。因此，如果这是您想要的 UI，请使用第一个。

在第二个中，（根目录下的选项卡，每个选项卡内嵌套的堆栈），当您导航到其他屏幕时，选项卡栏仍然存在。因此，如果您想要这种行为，请使用第二个。

【讨论】：