注销到本机的特定视图

Question

我是应对原生开发的初学者。目前，我正在尝试为登录注销过程设置导航。这是我现在的应用程序流程Home -> SignIn -> Dashboard。现在，当用户单击仪表板中的注销按钮时，应该返回主屏幕。第一次可以很好地运行，但是问题是，如果用户已经登录，它会跳过Home和SignIn并直接转到Dashboard，如果我尝试从那里注销，它实际上会推送切换到新的Home视图，同时将Dashboard保留在堆栈中，当我SignIn时，它会弹出转换为Dashboard，显示旧状态数据。我做了一些挖掘，并说react没有提供弹出显示到特定视图的条件，我们可能必须使用Hack来替换屏幕，但是我不确定如何继续进行操作。下面是我当前用于堆栈导航器和注销过程的代码。

const Navigator = createStackNavigator({
  SplashScreen: {
    screen: SplashScreen,
    navigationOptions: {
      header: null
    }
  },
  Home: {
    screen: Home,
    navigationOptions: ({ navigation }) => ({
      header: null
    })
  },
SignIn: {
    screen: SignIn,
    navigationOptions: {
      header: null
    }
  },
Dashboard: {
    screen: Dashboard,
    navigationOptions: {
      header: null
    }
  }
});

const Drawer = DrawerNavigator(
  { Navigator: { screen: Navigator } },
  { contentComponent: NavigationDrawer }
);

//In Dashboard
logoutUser = () => {
//Perform API call to logout user
this.props.navigation.navigate("Home");

}

Answer 1

您可以使用SwitchNavigator，

const DrawerNavigatorExample = createDrawerNavigator({
  //Drawer Optons and indexing
  Screen1: {
    //Title
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 1',
      drawerIcon: <Image
      source={require('../assets/drawer.png')}
      style={{ width: 25, height: 25, marginLeft: 5 }}
    />
    },
  },
  Screen2: {
    //Title
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 2',
      drawerIcon: <Image
      source={require('../assets/drawer.png')}
      style={{ width: 25, height: 25, marginLeft: 5 }}
    />
    },
  },
},
{
  contentComponent: DrawerContent
});

const onboardingStackNavigator = createStackNavigator( {
  Home: {
    screen: Login,
    navigationOptions: ({ navigation }) => ({
      title: "Login",
      headerTintColor: 'white',
      headerBackTitle: 'Back',
      headerStyle: {
        backgroundColor: headerBackgroundColor,

      },
      headerTintColor: headerTintColor,
    })
  },
  Signup: {
    screen: Signup,
    navigationOptions: ({ navigation }) => ({
      title: "SignUp",
      headerTintColor: 'white',
      headerBackTitle: 'Back',
      headerStyle: {
        backgroundColor: headerBackgroundColor,
      },
    })
  },},
  {
    initialRouteName: 'Home',
  }
)

const AppNavigator = createAnimatedSwitchNavigator(
    {   
      onboarding:onboardingStackNavigator,
      Drawer: {
        screen: DrawerNavigatorExample
      }
    },
    {
        initialRouteName: 'onboarding',
        transition: (
          <Transition.In type='fade'></Transition.In>
        )  
    },

   );

const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;