Comment terminer le composant actuel tout en naviguant vers le composant suivant en react native

Question

Bonjour, je essaye de naviguer vers le prochain composant en utilisant la fonction navigate. J'utilise react-navigation pour la navigation entre plusieurs composants.

Supposons que j'ai le composant index.android.js et DashboardScreen.js. J'essaie de naviguer vers le composant DashboardScreen.js depuis le composant index.

La navigation fonctionne mais le composant index reste toujours dans la pile de composants. Lorsque je retourne en arrière, il ouvre index.android.js ce qui ne devrait pas être le cas. Est-ce que quelqu'un sait comment gérer cela dans react-native. Sur Android, finish() fonctionne pour cela.

navigate("DashboardScreen");

Lorsque je navigue de SplashScreen vers EnableNotification, alors SplashScreen devrait être détruit, si je navigue de EnableNotification vers CreateMessage, alors EnableNotification devrait être détruit et si je navigue de CreateMessage vers DashboardScreen, alors CreateMessage devrait être détruit. Pour le moment, aucun composant n'est détruit.

index.android.js

class SplashScreen extends Component {
  render() {
    if (__DEV__) {
      console.disableYellowBox = true;
    }

    const { navigate } = this.props.navigation;

    AsyncStorage.getItem("@ProductTour:key").then(value => {
      console.log(value);
      if (value) {
        navigate("DashboardScreen");
      }
    });

    return (
     ....
    );
  }
}

const App = StackNavigator(
  {
    Splash: {
      screen: SplashScreen,
      navigationOptions: {
        header: {
          visible: false
        }
      }
    },
    EnableNotification: {
      screen: EnableNotificationScreen,
      navigationOptions: {
        header: {
          visible: false
        }
      }
    },
    CreateMessage: {
      screen: CreateMessageScreen,
      navigationOptions: {
        header: {
          visible: false
        }
      }
    },
    DashboardScreen: {
      screen: DashboardScreen,
      navigationOptions: {
        header: {
          visible: false
        }
      }
    }
  },
  {
    initialRouteName: "Splash"
  }
);

Answer 1

Oui, en réact native, vous pouvez terminer l'écran actuel avant de naviguer vers un nouvel écran avec l'aide de NavigationActions. Veuillez consulter ce lien -

http://androidseekho.com/others/reactnative/finish-current-screen-on-navigating-another-in-react-native/

Answer 2

SplashNavigator.js

const SplashNavigator = StackNavigator({
  Splash: {
    screen: SplashScreen,
    navigationOptions: {
      header: null}
    }
  }
});

Answer 3

Importer StackActions et NavigationActions de react-navigation.

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

code ci-dessous pour effectuer une action

navigateToHomeScreen = () => {
  const navigateAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: "HomeScreen" })],
  });

  this.props.navigation.dispatch(navigateAction);
}