React Navigation：直接移动到最后一页，onBack 转到上一个屏幕

Question

在 React Navigation 中，我怎样才能直接转到最后一页并按下 BackButton 时，返回到之前的屏幕。

让我解释清楚，

用户可以通过点击 'Add' 按钮来添加新表单。在我的例子中，用户必须浏览 3 个页面才能创建新表单。

添加示例：

ListPage ---> Page1 ---> Page2 ----> Page3（发送到 api）

这很好用。

用户可以edit从列表页面提交表单。因此，如果用户点击列表项，它必须直接移动到 Page3，然后当按下 BackButton 时，它必须移动到 Page2 然后 Page1 然后 ListPage.

编辑示例：

ListPage ----directnavigation----> Page3 ----backpressed----> Page2 ----backpressed----> Page1 ----背压----> ListPage

在 edit 场景中我该如何处理？

Answer 1

我不知道你是否一直在使用 React Header 或 native base header。但在这里我展示了一个示例，其中我将原生基础 header 与 React 导航

结合使用

    <Container>
                    <Header androidStatusBarColor={Constants.primary} hasTabs style={[Styles.header]}>
                        <Left style={{ flex: 1 }}>
                            <TouchableOpacity onPress={() => props.navigation.goBack()} style={{ flexDirection: 'row', alignItems: 'center' }}>
                                <Icon name="ios-arrow-back" style={[Styles.headerLeftIcon]} />
                                <Text style={[Styles.headerLeftText]}>Go Back</Text>
                            </TouchableOpacity>
                        </Left>
<Container>

这是用户使用 props.navigation.goBack() 单击后退箭头返回的基本代码。

因此，对于您的情况，我建议您向第 3 页发送一个参数（例如：类型：'edit'）。因此，当用户单击后退按钮时检查类型，如果它没有编辑，则执行基本的 props.navigation.goBack() 或者如果它的编辑转到 props.navigation.navigate('Second Page').

因为路由基本上像 push 和 pop 一样工作，所以如果我们直接到达 page3，page1 和 page2 不是路由数组的一部分，所以我们应该在单击后退按钮时向它显示从 page3 到第 2 页的路径

Answer 2

react-native 有解决您的场景的最佳方法。请使用 this.props.navigation.dispatch(屏幕名称);.

参考这个 link https://reactnavigation.org/docs/en/navigation-prop.html

Answer 3

我用 StackActions 修复了它。

这是代码，

  StackActions.reset({
    index: 2,
    key: undefined,
    actions: [
        NavigationActions.navigate({ routeName: 'Page1' }),
        NavigationActions.navigate({ routeName: 'Page2' }),
        NavigationActions.navigate({ routeName: 'Page3' })
    ]
});

React Navigation：直接移动到最后一页，onBack 转到上一个屏幕

React Navigation: move directly to last page and onBack go to previous screens

react-native

react-navigation

react-navigation-stack