是navigation.goBack（）; navigation.navigate（...）; 有效？

Question

What's the recommended way to eliminate a screen from the stack? I have a few cases where a user submits info on one screen (creating an account, or conducting a transaction, etc) and I'd like the input screen to be removed such that they're routed to the result screen and going back takes them to the screen prior to entering the info.

The ideal flow would be something like Item Screen -> Purchase Screen -> Result Screen --(goBack)--> Item Screen, to prevent confusion or double submission of collected info.

What I'm doing currently is navigation.goBack(); navigation.navigate('ResultScreen'); navigation.goBack(); navigation.navigate('ResultScreen'); , but I'm getting warnings about setting state on an unmounted component (the message suggests this is a memory leak). I don't see any obvious setState calls in my code on that path, so I'm thinking that either navigation.navigate() is doing a setState/forceUpdate (forceRender? whatever..) under the covers or that I'm otherwise not doing this in the intended way.

Searching the docs/stackoverflow/github issues hasn't been fruitful for guidance on this. Any suggestions?

Thanks!

Answer 1

The best way to achieve this so you don't over pollute your stack is by using the Reset action .

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

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

This way you are resetting the stack and eliminating the possibility of someone re-navigating back through your various items.