从最里面的堆栈屏幕导航到最外面的堆栈屏幕时出现白屏死机

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");

导航服务代码

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

你用过switch navigator吗？

更改为以下内容。

导入标题

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");