在react native导航中从Tab屏幕打开堆栈屏幕

Question

我在Stack中设置了一组屏幕。以下列方式导航

<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

您可以在选项卡屏幕上添加侦听器，防止默认操作&按tab键进入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>

如果没有，请分享更多关于预期行为的细节。