如何在 React Native 导航中的选项卡之间切换时保留堆叠屏幕

Question

我正在使用使用createBottomTabNavigator()创建的底部选项卡导航器并向其传递多个屏幕，每个屏幕都包含自己的堆栈导航：

const tabNavigator = createBottomTabNavigator({
TradingStack,
LendingStack,
FinanceStack,
AccountBalancesStack,
OtherStack,
},
{
tabBarComponent: props => (
<NavigationFooter />
)
}
);

我正在将我自己的自定义底部导航器组件传递给它，称为<NavigationFooter />.省略tabBarComponent时，将使用内置的底部选项卡导航器，但是我需要比此内置解决方案提供的更多功能。问题是，使用我的自定义选项卡栏时，我在各个屏幕中失去了堆栈持久性。为了澄清，假设我的TradingStack屏幕有几个堆叠在上面的屏幕，我打开其中一个。使用默认标签栏时，如果我切换到LendingStack屏幕，然后回到TradingStack，我仍将位于被推到根TradingStack屏幕顶部的堆叠屏幕上。

但是，在使用我的自定义选项卡栏组件时，在这些选项卡/屏幕之间移动将始终将我带到每个选项卡的根目录，而不是在切换离开选项卡之前将我带回选项卡所在的堆叠屏幕。这是我的自定义页脚组件：

function Footer({navigation}) {
return(
<View style={styles.tabBarStyle}>
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Trading')} />
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Lending')} />
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Finance')} />
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('AccountBalances')} />
<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('TabScreen')} />
</View>
);
}
const NavigationFooter = withNavigation(Footer);

如您所见，当按下TouchableOpacity元素之一时，我使用navigation.navigate()转到所需的屏幕，但是，如前所述，这会将我带到屏幕的根部。我知道这基本上是明确告诉应用程序导航到选项卡的根屏幕，但我不知道如何在我离开之前使选项卡"记住"它所在的堆叠屏幕，就像默认选项卡栏的行为一样。

Answer 1

您可以将实际堆栈的名称传递给navigation.navigate，而不是该特定选项卡上的起始屏幕的名称，堆叠屏幕应保留。因此，而不是，例如

<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('Trading')}/> //name of the screen

你应该通过它

<TouchableOpacity style={styles.tabStyle} onPress={() => navigation.navigate('TradingStack')}/> //name of the stack

假设Trading是TradingStack中的起始屏幕。