堆栈导航器之间的反应导航返回答案

【问题标题】：react-navigation goBack between stack navigators堆栈导航器之间的反应导航返回
【发布时间】：2019-08-04 20:50:09
【问题描述】：

在我的 React 本机应用程序中，我使用“react-navigation”：“^3.11.0”。我有顶级的bottomTabNavigator

const TabNavigator = createBottomTabNavigator({
    Main: {
        screen: balanceStack,
        navigationOptions: {
            tabBarLabel: I18n.t("balanceTabLabel"),
            tabBarIcon: ({ tintColor}: {tintColor: string}) => (
                <Icon name="home" style={{color: tintColor}} />
            )
        }
    },
    ServicesStack: {
        screen: servicesStack,
        navigationOptions: {
            tabBarLabel: I18n.t("servicesTabLabel"),
            tabBarIcon: ({ tintColor}: {tintColor: string}) => (
                <Icon name="list-box" style={{color: tintColor}} />
            )
        }
    },

}, {
    tabBarOptions: {
        activeTintColor: WHITE_COLOR,
        inactiveTintColor: WHITE_COLOR,
        style: {
            backgroundColor: PRIMARY_COLOR,
        }
    },
    backBehavior: 'history',
    swipeEnabled: true,
});

每个选项卡的堆栈导航器：

const balanceStack = createStackNavigator({
    Balance: {
        screen: MainScreen,
    },
    FullBalance: {
        screen: FullBalanceScreen,
    },
    Payment: {
        screen: PaymentScreen,
    },
    ServiceView: {
        screen: ViewServiceScreen,
    },
}, {
    initialRouteName: 'Balance',
    headerMode: 'none',
});

const servicesStack = createStackNavigator({
    AllServices: {
        screen: AllServicesScreen,
    },
    ServiceView: {
        screen: ViewServiceScreen,
    },
    ServiceOptionAction: {
        screen: ServiceOptionsActionScreen,
    }
}, {
    initialRouteName: 'AllServices',
    headerMode: 'none',
});

我希望所有选项卡的导航都是通用的，而不是按堆栈划分。

例如当我导航时

Balance->FullBalanceScreen->AllServices（通过单击服务选项卡）->ServiceView

如果我单击返回按钮（调用 goBack()）一次，我将返回 AllServices。但是，如果我第二次单击返回，我不会导航到 FullBalanceScreen，因为它在另一个堆栈中。我该怎么做？

【问题讨论】：

这个小麦是不是你想在ServiceView中按Back键时移到AllServices，然后在AllServices中按Back键时又回到ServiceView？
@hong-develop，对不起。那是帖子中的错误。我想回到 FullBalanceScreen，而不是 ServiceView。 FullBalanceScreen 来自主堆栈
所以您想在按下 AllServices 上的返回按钮时转到 FullBalanceScreen？后退按钮现在在哪里？
后退行为手动添加到所有屏幕的标题中，例如 this.props.navigation.goBack()}/>。我试过 this.props.navigation.goBack(null) 但它也没有像我预期的那样工作。

标签： react-native react-navigation

【解决方案1】：

最后，我没有找到 TabNavigator 的解决方案，并将其替换为顶级 StackNavigator。我还使用自定义底部选项卡组件并将 onPress 设置为选项卡按钮

onPress () {
        this.props.navigation.navigate (this.props.navigateRouteName)
    }

navigateRouteName 是到目标堆栈路由的 routeName。

【讨论】：

【解决方案2】：

如果您定义了一个自定义标题（用于顶级导航，或为每个堆栈重复），则导航对象将具有全局历史记录（不仅仅是每个堆栈），因此单击返回将在选项卡之间跳转

<A.Navigation screenOptions={{header: ({nav}) =>  <CustomHeader nav/>}>

在您的标题中，您可以有条件地显示后退按钮并添加处理程序

if (nav.canGoBack()) // show button
... nav.goBack() // onPress

【讨论】：