在反应原生导航中从 Tab 屏幕打开堆栈屏幕

Question

我在 Stack.Navigation 中按以下方式设置了一组屏幕

<Stack.Navigation>
 <Stack.Screen name = 'Home' />
 <Stack.Screen name = 'Tabs' />
 <Stack.Screen name = 'Settings' />
</Stack.Navigation>

我还通过以下方式在Tabs 屏幕中设置了一个标签系统。

<Tab.Navigation>
 <Tab.Screen name = 'Tab1' />
 <Tab.Screen name = 'Tab2' />
 <Tab.Screen name = 'Settings' />
</Tab.Navigation>

现在我需要标签屏幕Settings 来打开堆栈屏幕Settings。 我该如何使用 React Native Navigation 来做到这一点？

任何帮助或建议将不胜感激。

编辑：

我的选项卡屏幕不仅包含选项卡，例如：

<View>
 <View>
  Lots of other content here 
 </View>
 <Tab.Navigation>
  <Tab.Screen name = 'Tab1' />
  <Tab.Screen name = 'Tab2' />
  <Tab.Screen name = 'Settings' />
 </Tab.Navigation>
</View>

所以标签内容只会覆盖屏幕的一部分。当我移动到“设置”屏幕时，我需要它占据整个屏幕，就像从 Stack.Nav 调用时它会自动执行一样。

Answer 1

您可以向选项卡屏幕添加侦听器，阻止默认操作并在选项卡按下时导航到settings 堆栈屏幕。

...

<Tab.Navigation>
 <Tab.Screen 
   name = 'Settings' 
   listeners={() => ({
      tabPress: (e) => {
          e.preventDefault();
          navigation.navigate('Settings');
      }
   })} />
</Tab.Navigation>

Answer 2

如果我理解正确，您想从标签导航器中打开堆栈设置屏幕。

将它们指向同一个组件，实现您的目标吗？

示例：

<Stack.Navigation>
 <Stack.Screen name = 'Home' />
 <Stack.Screen name = 'Tabs' />
 <Stack.Screen name = 'Settings' component={SettingsScreen}/>
</Stack.Navigation>

接着是：

<Tab.Navigation>
 <Tab.Screen name = 'Tab1' />
 <Tab.Screen name = 'Tab2' />
 <Tab.Screen name = 'Settings' component={SettingsScreen} />
</Tab.Navigation>

如果不是，请分享有关预期行为的更多详细信息。