Question

使用反应导航（https://reactnavigation.org/docs/en/navigating.html）并具有以下形式的导航设置：

bottomTabNavigator
    stackNavigatorA
        screenA1
        screenA2
        (with initialRouteName=screenA1)
    stackNavigatorB
        screenB1
        screenB2
        screenB3
        screenB4
        (with initialRouteName=screenB1)

screenA1基本上看起来像

<View>
<Button title='to A2' onPress={this.props.navigation.navigate('screenA2')}/>
</View>

和screenA2

<View>
<Button title='to B3' onPress={this.props.navigation.navigate('screenB3')}/>
</View>

B屏幕看起来像

// screenB1
<View>
<Button title='to B2' onPress={this.props.navigation.navigate('screenB2')}/>
</View>

// screenB2
<View>
<Button title='to B3' onPress={this.props.navigation.navigate('screenB3')}/>
</View>

// screenB3
<View>
<Button title='to B4' onPress={this.props.navigation.navigate('screenB4')}/>
</View>

// screenB4
<View>
</View>

使用此设置，我可以从B1-> B2-> B3-> B4导航并成功地向下堆叠，并且可以从A1-> A2导航并成功地向下堆叠。但是，当尝试从A1-> A2-> B3（或-> B4）导航并返回时，它最终会采用路径A1到A2到B3回溯B1（而不是返回A2）。即使将<Button title='FIXME: goback workaround' onPress={() => {this.props.navigation.goBack()}}/>添加到screenB3也无济于事（在这里，我期望它可以返回到先前的屏幕）。

有人可以解释为什么会这样吗？不了解this.props.navigation.navigate()在这种情况下正在做什么？关于文档的任何事情？我认为使用默认的后退按钮只会在用于到达任何给定屏幕的堆栈中反向移动。

Answer 1

TLDR ：

最终创建了一个单独的导航。菜单

stackNavigatorB'
       screenB3
       screenB4

也要设置表格

stackNavigatorA
        screenA1,
        screenA2,
        stackNavigatorB'

 stackNavigatorB
        screenB1,
        screenB2,
        stackNavigatorB'

这使我可以在B导航器B和B3导航器之间使用B3和B4屏幕在每个堆栈中独立地浏览不同数据。

其他事情尝试和失败（出于信息目的）：

使用goBack（）时，它会返回到该堆栈中的上一条路由。使用this.props.navigation.navigate可以转到任何屏幕，但是如果您从堆栈A的屏幕移动到堆栈B的屏幕，则使用goBack将返回堆栈B中的上一条路由。查看文档（https://reactnavigation.org/docs/en/navigation-prop.html#docsNav）时，我最初以为这意味着“当用户浏览不同的堆叠卡时正在创建的堆叠”（即，返回将回到用户刚刚使用的卡之前看过）。这并不意味着堆栈是完全隔离的，而是意味着如果要在不同堆栈之间导航，则不能使用goBack或push。 goBack和Push 遵循堆栈流程，而navigate则允许您转到任何屏幕，而不管它们的路线如何。
- 这样想：导航是全局的，而push和goBack是“子导航”，但它们不在同一作用域内操作。如果导航到属于另一个堆栈的屏幕并要返回，则仍可以记录导航并导航到先前的路线名称（使用自定义功能进行跟踪，或导航状态管理）。您不能只使用内置的goBack函数，因为它具有不同的用途。
将导航器设置为

stackNavigatorA [ 屏幕A1，屏幕A2，屏幕B3， screenB4]

stackNavigatorB [ 屏幕B1，屏幕B2，屏幕B3， screenB4]

我仍然会从B3返回（无论我是从A1还是B1到达那里）将我带回到B1的行为。我现在想，堆栈可以导航到其所有分配的屏幕，并以它们返回的方式goBack（）而不相互交互（当只是使用默认的后退按钮来追溯“向下”堆栈时），因为它们在自己的堆栈中分配的屏幕中使用此“子导航”（如上一个要点所述）。
- 正如已经向我解释的那样：this.props.navigation.push和this.props.navigation.goBack用于在同一堆栈中进行导航。屏幕复制不会更改此行为。如果需要在来自不同堆栈的屏幕之间来回切换，则应使用.navigation。您可以使用NavigationOptions构建自己的调度动作，并跟踪导航（即，将路线存储在商店中，并使用自己的goBack函数导航到上一条路线）。如果当时使用redux，这可能是更好的方法。参见https://reactnavigation.org/docs/en/navigation-actions.html

**此答案的某些部分来自react-navigate不和谐聊天中的讨论。

react-navigate stackNavigator回溯到与屏幕不同的屏幕

1 个答案: