在反应本机导航中从选项卡屏幕打开堆栈屏幕

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

如果我没理解错的话，你是想从选项卡导航器中打开堆栈设置屏幕。

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

示例：

<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>

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

Answer 2

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

...

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

在反应本机导航中从选项卡屏幕打开堆栈屏幕

Open stack screen from Tab screen in react native navigation

react-native

react-native-ios

react-native-navigation

react-navigation

react-navigation-bottom-tab