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，请选择第一个。

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

React Navigation v6 最佳结构

React Navigation v6 Best Structure

javascript

react-native

react-navigation