React-Navigation with redux - Przycisk Wstecz w StackNavigator zagnieżdżony w TabNavigator wyzwala działanie z powrotem w obu nawigatorach

Question

Mam konfigurację nawigacji z pomocą redux. Moja aplikacja składa się z rodzica TabBarNavigator z ekranem logowania i treści. Ekran zawartości sam jest nawigatorem stosu, który zawiera główną nawigację dla aplikacji. Wszystkie inne aspekty redux i nawigatorów działają zgodnie z oczekiwaniami, ale domyślny przycisk Wstecz na StackNavigator wyzwala również, aby rodzic TabBarNavigator wrócił.

Czy to oczekiwane zachowanie? Zauważyłem, że jeśli I zdefiniować headerLeft w navigationOptions jak to, że działa zgodnie z oczekiwaniami:

static navigationOptions = ({ navigation }) => { 
    return { 
     headerLeft: (
     <Button transparent onPress={() => { navigation.goBack(); }}><Text>Back</Text></Button> 
    ) 
    }; 
    }; 

Cam ktoś wytłumaczyć co jest tego przyczyną? Czy istnieje sposób, aby domyślny przycisk powrotu backNavigator działał z redux?

Answer 1

Może wysyłki działanie będzie działać lepiej:

onPress={() => { 
     navigation.dispatch(NavigationActions.navigate({ 
     routeName: '<screen name here>' 
     })); 
    }} 

Answer 2

Można zrobić jedną rzecz na onPress razie przed nazywają goBack() masz wysyłką swoje działania dla tego konkretnego Redux:

static navigationOptions = ({ navigation }) => { 
return { 
    headerLeft: (
    <Button 
     transparent 
     onPress={() => { 
      <ACTION_DISPATCH> 
      navigation.goBack(); 
     }}> 
     <Text>Back</Text> 
    </Button> 
) 
};}; 

Answer 3

W moim przypadku problem był trochę bardziej skomplikowany, ponieważ korzystam z funkcji reagowania na integrację nawigacyjną Redux.

Moje działanie odwrotne jest wysyłką akcji "wstecznej", ale w moim redukującym przeoczyłem drugi parametr metody getStateForAction (stan).

getStateForAction (akcja, state)

https://reactnavigation.org/docs/routers/api#getStateForAction-action-state

Więc, moim nawigacji Redux, to działa z tym powrotem reduktora:

export const back = (state) => AppNavigator.router.getStateForAction(NavigationActions.back(), state) 

Dzięki tej tylnej działania, o wróć z zagnieżdżonego nawigatora nie resetuje głównego nawigatora.