时间戳

首页 > 解决方案 > this.props.navigation.navigate 没有导航到正确的屏幕

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

问题描述

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

导航期望：

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 层打开，但发生的情况是，它作为第 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>
        )
    }
}

标签： react-nativereact-navigation

解决方案

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

推荐阅读