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

此处的屏幕1和屏幕2是可以从任何选项卡屏幕调用的常见组件。例如，我可以从任何选项卡屏幕上显示产品显示页面。问题是，如果 tab_screen1和i切换选项卡的屏幕1是调用 tab_screen2的，然后从 tab_screen2访问screen1，则调用tab_screen1的先前已安装的屏幕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/reaect-navigation/issues/586#issuecomment-310692484