web-dev-qa-db-fra.com

Supprimer l'écran du navigateur de pile

J'ai observé que la logique du bouton Retour fonctionne en voyant la séquence des écrans dans la pile. J'ai un navigateur de tiroir placé dans le navigateur de pile.

Au-dessus de la pile, j'ai un écran Splash. Sur le tableau de bord, lorsque j'appuie sur le bouton de retour, il me faut un écran de démarrage.

Comment puis-je supprimer l'écran de démarrage de la pile après être entré dans l'application, donc lorsque j'appuie sur le bouton de retour Dashboard, il quittera l'application au lieu de passer à SPLASH SCREEN.

/* @flow */

import React from "react";
import { Platform, Text } from "react-native";
import { Root } from "native-base";
import { StackNavigator, DrawerNavigator} from "react-navigation";
import Register from "./components/Register";
import Available from "./components/Available";
import Splash from "./components/splash/“;
import SideBar from "./components/sidebar";
import Discover from "./components/Discover/";
import Dashboard from "./components/Dashboard/";
import Contact from "./components/Contact"



const Drawer = DrawerNavigator(
  {
    Dashboard: { screen: Dashboard },
    Discover: { screen: Discover },
    Contact: { screen: Contact},
      },
  {
    navigationOptions: {
      gesturesEnabled: false,
    },
   initialRouteName: "Dashboard",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    drawerPosition: 'right',
    contentComponent: props => <SideBar {...props} />
  }
);


const AppNavigator = StackNavigator(
    {
      Splash: { screen: Splash },
      Drawer: { screen: Drawer },                           
      Available: { screen: Available },
        Register: { screen: Register },
    },
    {
       //  initialRouteName: “Splash”,
         headerMode: "none",
    }
);

export default () =>
    <Root>
        <AppNavigator />
    </Root>;
react-nativereact-navigation
8
devedv

Une solution serait de réinitialiser la pile à l'intérieur du composant d'écran de démarrage et de rediriger l'utilisateur vers l'écran que vous préférez:

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Drawer'})
  ]
})
this.props.navigation.dispatch(resetAction)

Pour les nouvelles versions de react-navigation:

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);

Lien vers la documentation officielle

13
Sarantis Tofas

Je l'ai résolu en utilisant this

code:

const prevGetStateForActionHomeStack = HomeStack.router.getStateForAction;
HomeStack.router = {
  ...HomeStack.router,
  getStateForAction(action, state) {
    if (state && action.type === 'ReplaceCurrentScreen') {
      const routes = state.routes.slice(0, state.routes.length - 1);
      routes.Push(action);
      return {
        ...state,
        routes,
        index: routes.length - 1,
      };
    }
    return prevGetStateForActionHomeStack(action, state);
  },
};
replaceScreen = () => {
  const { locations, position } = this.props.navigation.state.params;
  this.props.navigation.dispatch({
    key: 'NearMeMap',
    type: 'ReplaceCurrentScreen',
    routeName: 'NearMeMap',
    params: { locations, position },
  });
};

Aussi, si vous avez besoin d'une explication approfondie du code, regardez cette courte vidéo ici

3
minimalist