this.props.navigation.navigate 没有导航到正确的屏幕答案

【问题标题】：this.props.navigation.navigate is not navigating to the correct screenthis.props.navigation.navigate 没有导航到正确的屏幕
【发布时间】：2019-08-06 15:08:50
【问题描述】：

我遇到了这种奇怪的情况，当我从一个屏幕导航到另一个屏幕时，它会导航回之前打开的屏幕。

导航预期：

Layer 1 (screen A) > Layer 2 (screen B) > Layer 3 (screen C) > Layer 4 (screen D) > Layer 5 (screen B) > Layer 6 (screen C) > Layer 7 (screen D)

当从每个屏幕点击go back按钮时，它会向后弹出

Layer 7 > Layer 6 > Layer 5 > Layer 4 > Layer 3 > Layer 2 > Layer 1

Instagram 应用是导航循环的好例子。

我的应用面临的问题：

Layer 1 (screen A) > Layer 2 (screen B) > Layer 3 (screen C) > Layer 4 (screen D) > Layer 2 (screen B) > Layer 3 (screen C)

如果您从 Layer 4（屏幕 D） 看到导航到 screen B，它应该将其打开为 Layer 5，但发生了什么是，它被打开为 Layer 2，它向后跳了 2 层。

我正在使用this.props.navigation.navigate('ScreenName') 导航到另一个屏幕。

编辑：示例代码

我在我的应用程序中设置了这样的路线：

import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import ScreenA from 'app/views/ScreenA';
import ScreenB from 'app/views/ScreenB';
import ScreenC from 'app/views/ScreenC';
import ScreenD from 'app/views/ScreenD';

const Navigation = createStackNavigator({
    'PublicRoutes': {screen: ScreenA},
    'ScreenB':{screen: ScreenB},
    'ScreenC':{screen: ScreenC},
    'ScreenD':{screen: ScreenD},
});

export default createAppContainer(Navigation)

这是屏幕的示例代码：

type Props = {};
export default class ScreenD extends Component<Props> {
    constructor(props){
        super(props);
        this.state = {};
    }

    render() {
        return (
            <View>
                <TouchableOpacity onPress={()=>this.props.navigation.navigate('ScreenB')}>
                    <Text>PRESS</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

【问题讨论】：

请给我看你的堆栈设置代码。
@hongdevelop 我在我的问题中添加了一些代码。谢谢。
我想看看第 4 层和第 5 层。你有问题的地方
我的屏幕都被导入route 文件并在createStackNavigator 中注册，就像在第一个代码堆栈中一样，我所有屏幕的代码结构就像在第二个代码堆栈中一样。每个屏幕都没有区别。
我在看代码的时候发现了一个问题。为什么第 5 层和第 2 层的 routeName 一样？

标签： react-native react-navigation

【解决方案1】：

尝试在构造函数之外使用 render(){}？

【讨论】：

哦，对不起，我在问题中设置错误。我对其进行了更正。我的代码设置与我在问题中所做的新更新一样。

【解决方案2】：

您拥有相同的routeName。名称的设置必须因屏幕而异。 Navigation 不区分。

import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import ScreenA from 'app/views/ScreenA';
import ScreenB from 'app/views/ScreenB';
import ScreenC from 'app/views/ScreenC';
import ScreenD from 'app/views/ScreenD';
import ScreenE from 'app/views/ScreenE';

const Navigation = createStackNavigator({
    'PublicRoutes': {screen: ScreenA}, // Layer 1
    'ScreenB':{screen: ScreenB}, // Layer 2
    'ScreenC':{screen: ScreenC}, // Layer 3
    'ScreenD':{screen: ScreenD}, // Layer 4
    'ScreenE':{screen: ScreenE}, // Layer 5
});

ScreenD.js

this.props.navigation.navigate('ScreenE')

如果你想再次渲染屏幕，你可以使用它。

this.props.navigation.push('screenB')

【讨论】：

用push 解决了我的问题。再次感谢您。