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

Question

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

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

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

但是，当使用我的自定义标签栏组件时，在这些 tabs/screens 之间移动总是会把我带到每个标签栏的根，而不是让我回到标签在切换之前所在的堆叠屏幕从中。这是我的自定义页脚组件：

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() 转到所需的屏幕，但是，如前所述，这将我带到了屏幕。我知道这基本上是明确告诉应用程序导航到选项卡的根屏幕，但我不知道如何使选项卡 "remember" 成为我离开之前所在的堆叠屏幕，就像默认标签栏的行为。

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 中的起始屏幕。

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

How to persist stacked screens when switching between tabs in React Native Navigation

react-native

react-navigation

react-native-tabnavigator