I am working on react-navigation v6 and was wondering if the below two structures makes difference in terms of performance, especially since I am doing deeplinking to the details screen.
First Structure:
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>
);
}
Second Structure:
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>
);
}
from React Navigation v6 Best Structure
No comments:
Post a Comment