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

时间:2019-04-02 08:15:01

标签: react-native react-navigation

我有一个包含标签导航器的堆栈导航器,其中包含标签导航器。我试图从最里面的堆栈屏幕导航到最外面的堆栈屏幕。最里面的堆栈屏幕将卸下,但最外面的堆栈屏幕将无法安装,并停留在死亡的白色屏幕上。

我已经尝试记录结果,但在那里什么都没看到。

我的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屏幕,但是它卸载了帐户屏幕,但将应用程序冻结在死亡的白色屏幕上。

1 个答案:

答案 0 :(得分:0)

您是否使用了开关导航器?

更改为以下内容。

导入标题

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