Question

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

导航期望：

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)

如果您从第4层（屏幕D）中看到，导航到屏幕B ，则应将其打开为第5层，但是发生了什么是，它以 Layer 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>
        )
    }
}

Answer 1

尝试在构造函数之外使用render（）{}吗？

Answer 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')

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

2 个答案: