从最里面的堆栈屏幕导航到最外面的堆栈屏幕的白色死亡屏幕

Question

我有一个包含选项卡导航器的堆栈导航器，其中包含堆栈导航器。从最里面的堆栈屏幕，我试图导航到外部堆栈中的屏幕。最里面的堆栈屏幕卸载，但外部堆栈中的屏幕没有安装，并且卡在死亡的白色屏幕上。

我已经尝试记录结果，但没有看到任何内容。

我的App.js

const profileNavigator = createStackNavigator(
  {
    Account: {
      screen: Accountscreen
    },
    Support: {
    screen: Supportscreen
    },
  },
);

const feedNavigator = createStackNavigator(
  {
    Feed: {
      screen: Feedscreen
    },
  },
);

const chatNavigator = createStackNavigator(
  {
    chatnews: {
      screen: chatnews
    },

  },

);

const Tabscreen = createMaterialTopTabNavigator(
  {
    Profile: {
      screen: profileNavigator,
    },
    Feed: {
      screen: feedNavigator,      
    },
    Chat: {
      screen: chatNavigator,
    }
  },
);

const AppNavigator = createStackNavigator(
  {
    LoginCheck: {
      screen: LoginCheckScreen
    },
    Login: {
      screen: Loginscreen
    },
    Tabscreen: {
      screen: Tabscreen
    }
  },
  }
);

我在注销屏幕代码中的代码：

NavigationService.navigate("LoginCheck");

NavigationService代码

import { NavigationActions } from 'react-navigation';
let _navigator;

function setTopLevelNavigator(navigatorRef) {
    _navigator = navigatorRef;
}

function navigate(routeName, params) {
    _navigator.dispatch(
        NavigationActions.navigate({
            type: NavigationActions.NAVIGATE,
            routeName,
            params,
        })
    );
}

export default {
    navigate,
    setTopLevelNavigator,
};

我希望能够导航到LoginCheck屏幕，但是它会卸载帐户屏幕，但会在死机的白色屏幕上冻结应用程序。

Answer 1

你使用过切换导航器吗？

更改为以下内容。

导入标题

import {
  ...
  ...
  createAppContainer,
  createStackNavigator,
  createSwitchNavigator,
} from "react-navigation";

更新代码

const profileNavigator = createStackNavigator(
  {
    Account: {
      screen: Accountscreen
    },
    Support: {
    screen: Supportscreen
    },
  },
);

const feedNavigator = createStackNavigator(
  {
    Feed: {
      screen: Feedscreen
    },
  },
);

const chatNavigator = createStackNavigator(
  {
    chatnews: {
      screen: chatnews
    },

  },

);

const Tabscreen = createMaterialTopTabNavigator(
  {
    Profile: {
      screen: profileNavigator,
    },
    Feed: {
      screen: feedNavigator,      
    },
    Chat: {
      screen: chatNavigator,
    }
  },
);

const AppNavigator = createSwitchNavigator(
  {
    LoginCheck: LoginCheckScreen,
    Login: Loginscreen,
    Tabscreen: Tabscreen
  },
  { headerMode: "none", initialRouteName: "PreLoader" }
);

const App = createAppContainer(AppNavigator);

export default App; //finally export App

当您想要更改为登录屏幕时，请在按钮单击或其他内容上使用以下代码。

this.props.navigation.navigate("LoginCheck");