Question

在我的React本机应用程序中，我使用的是“反应导航”：“ ^ 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，因为它在另一个堆栈中。我该怎么办？

Answer 1

最后，我没有使用TabNavigator找到解决方案，而是将其替换为顶级StackNavigator。另外，我使用自定义底部的Tabs组件，并将onPress for tab按钮设置为

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

其中navigationRouteName是到目标堆栈路由的routeName。

Answer 2

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

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

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

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

堆栈导航器之间的react-navigation goBack

2 个答案: