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

Question

我正在开发一个主要导航由 bottom tabs 组成的应用程序，该应用程序有一些屏幕需要从不同的 tabs/places 全局访问。需要强调的重要一点是，从这个全局屏幕我可以返回到访问它的地方（返回导航操作）。这里有一个简单的 UI 来说明用例：

我不清楚导航器的分布必须如何才能实现此导航架构。

Answer 1

您可以做的是 在堆栈导航器中嵌套底部选项卡导航器

并将全局屏幕放在堆栈导航器中

像这样：

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>
    
  );
}

对于你问题的第二部分，要返回你应该使用 navigation.goBack();

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

How to implement global accesed screens with bottom tab navigator

reactjs

react-native

react-navigation