common/shared React 导航中的屏幕路由？

Question

我有这样的导航配置。

StackNavigator
     -> stack_screen1
     -> stack_screen2
     -> TabScreens

TabScreens
    -> tab_screen1
        -> StackNavigator
            -> screen x
            -> screen1 // common component
            -> screen2 // common component
    -> tab_screen2
        -> StackNavigator
            -> screen y
            -> screen1
            -> screen2
    -> tab_screen3
        -> StackNavigator
            -> screen z
            -> screen1
            -> screen2

这里的 screen1 和 screen2 是通用组件，可以从任何选项卡屏幕调用。例如，我可以从任何选项卡屏幕显示产品展示页面。问题是如果从 tab_screen1 调用 screen1 并且我将选项卡切换为 tab_screen2，然后从 tab_screen2 访问 screen1，则调用之前安装的来自 tab_screen1 的 screen1 并且选项卡也切换到原始选项卡。

解决方法是为相似的组件设置不同的密钥。但这需要大量工作，因为我的应用程序中有许多共享组件，而且我正在更换导航实验以做出反应-navigation.Any 其他解决方案吗？

Answer 1

您可以将 Tab 包装到 StackNavigator 中，试试这个...

const TabApp = TabNavigator(
  {
    Home: {
      screen: Home,
    },
    Notifications: {
      screen: Notifications,
    },
    Profile: {
      screen: Profile,
    },
  },
)
const App = = StackNavigator(
  {
    Home: { screen: TabApp },
    ProfileOne: { screen: ProfileScreen},
    ProfileTwo: { screen: ProfileScreen2},
  }
);

这样 ProfileScreen 和 ProfileScreen2 在所有选项卡之间共享

https://github.com/react-navigation/react-navigation/issues/586#issuecomment-310692484

common/shared React 导航中的屏幕路由？

common/shared screen routing in react navigation?

react-native

react-navigation