React Native - Reset child stackNavigator to initi

2019-06-24 08:48发布

问题:

I have a simple navigation structure set up with 4 primary screens that the user navigates between using react-navigation/TabNavigator. Within each of those primary screens the user can navigate to the secondary screen using react-navigation/StackNavigator. The secondary screen is the same component for all 4 primary screens, as the content is loaded dynamically depending on which is selected using redux to change the state of the content.

You can see the structure in the diagram below.

The problem I am having is once the secondary screen is called from tab1(for example) the secondary screen rolls into place with content relevant to tab1. If the user then navigates to tab2 and calls the secondary screen, it again rolls into place with content relevant to tab2. This is all fine however if the user then navigates back to tab1 the secondary screen is still in place, this time with the content relevant to tab2 as they have changed the state in the previous tab.

To cut a long story short I'm trying to reset the individual stacks of each primary screen if the user interacts with the TabNavigator at anytime. I'm struggling to see how I can initiate a function from the child stack components by triggering an event in the parent tab component.

Hope that makes sense to people.