混合使用 TabNavigator 和 StackNavigator 时出现问题

Question

我在 TabNavigator 中有 2 个堆栈。结构如下

堆栈A
- 屏幕 A
- 屏幕 A1
- 屏幕 A2

堆栈B
- 屏幕 B
- 屏幕 B1
- 屏幕 B2

TabNavigator
- StackA
- 堆栈 B

现在，在屏幕 A 中，我想导航到屏幕 B1。我只是使用 navigate('Screen B1')，导航看起来很成功。但是当我点击后退按钮时（我的天）我在 StackB 上显示屏幕 B。

我真的很期待在这种情况下看到屏幕 A。

Answer 1

目前，Stack A 和 Stack B 在不同的堆栈中。其他堆栈导航器位于 tab navigator 内，因此可以移动它们，但后退按钮（默认的堆栈导航器命令）不会移动到您想要的位置。因为你的stack B的初始画面是screen B，你会在screen B的堆栈堆叠后在上面看到screen B1。如果您想去想去的地方，请按返回按钮并转到所需的屏幕

// B1 Screen Back button
navigate('Screen A') 

// OR If you want Screen A to be rendered again,
push('Screen A')

Answer 2

为此，您必须创建一个自定义 backButton，让您的屏幕知道您从哪里开始导航。一个例子是：

this.props.navigation.navigate('ScreenB1', {lastScreen:"ScreenA1"})   //navigating from stack to other stack with param

然后，backButton 将检查 lastScreen 变量并查看它是否已定义。

<BackButton onPress={({navigation})=>{
    let lastScreen=navigation.state.params.lastScreen
    if (lastScreen) return navigation.navigate(lastScreen)
    else navigation.pop(1)
    }
}

因为我不知道你的代码看起来像我写的一般情况，但你可以根据需要更改它。

混合使用 TabNavigator 和 StackNavigator 时出现问题

Problem when mixing TabNavigator and StackNavigator

react-native

react-native-navigation