如何使用底部标签导航器实现全局访问屏幕

Question

I'm developing an application whose main navigation is composed by bottom tabs , this application has some screens which need to be globally accesed from different tabs/places. An important thing to highlight is that from this global screen I can go back to the place from which it was accessed(go back navigation action). Here a simple UI to ilustrate the use case:

It's not clear to me how the distribution of the navigators must be to be able to implement this navigation architecture.

Answer 1

what you can go is Nest bottom tabs navigator inside a stack navigator

and put the global screens inside the stack navigator

something like this:

function bottomTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={bottomTabNavigator}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="GlobalScreen" component={GloballyAccessedScreen} />
      </Stack.Navigator>
    
  );
}

for the second part of your question, to go back you should use navigation.goBack();