在本机反应中注销到特定视图

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;