React Navigation Tabs with Headers 组合来自文档无法按预期工作

如何解决React Navigation Tabs with Headers 组合来自文档无法按预期工作

我正在尝试使用 React Native 的 React Navigation 以允许 3 个选项卡屏幕显示标题部分，其中显示 a) 当前屏幕的标题和 b) 标题右侧的“设置齿轮”。

如果用户点击设置齿轮，他们将进入设置屏幕。如果他们点击返回，他们将返回到之前所在的屏幕。

我正在遵循文档中的以下建议：

https://reactnavigation.org/docs/tab-based-navigation/#a-stack-navigator-for-each-tab

错误：

1. 用户点击 tab1 并转到 screen1。
2. 用户点击设置齿轮并进入设置屏幕。
3. 用户单击设置屏幕上的后退按钮并返回屏幕 1。
4. 用户点击 tab3 并转到 screen3。
5. 用户点击设置齿轮并进入设置屏幕。
6. 用户单击设置屏幕上的后退按钮并返回屏幕 3。
7. 现在，如果用户单击任何屏幕上的设置齿轮，tab3 始终突出显示为活动路径，并且设置屏幕上的后退按钮始终返回屏幕 3

我尝试了完全相同设置的多种变体，但它始终默认为最后一个屏幕。

为什么我要在每个 DynamicStackScreen 中重复设置？因为这就是文档所说的对将在每个堆栈中重复出现的项目执行的操作 - 即 （来自文档）。

以下是 App.tsx 的代码。它使用了文档中示例的动态版本 - 但我已经尝试了这两种方法并且它导致了相同的错误。

 <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen 
          name="Screen1" 
          children={()=><DynamicStackScreen 
                          stackName1="Screen1"
                          stackComponent1={MatchesScreen}
                          stackName2="Settings"
                          stackComponent2={SettingsScreen} />} />
        <Tab.Screen 
          name="Screen2" 
          children={()=><DynamicStackScreen 
                          stackName1="Screen2"
                          stackComponent1={MessagesScreen}
                          stackName2="Settings"
                          stackComponent2={SettingsScreen} />} />
        <Tab.Screen 
          name="Screen3" 
          children={()=><DynamicStackScreen 
                          stackName1="Screen3"
                          stackComponent1={ProfileScreen}
                          stackName2="Settings"
                          stackComponent2={SettingsScreen} />} />
      </Tab.Navigator>
    </NavigationContainer>