Jak przejść do innego ekranu i wrócić do ekranu, skąd jest on obsługiwany za pomocą programu DrawerNavigator?

Question

Mam dwa składniki (lista i szczegóły):

List.js:

export default class List extends React.Component { 
    render() { 
     const {navigate} = this.props.navigation; 
     return (
      <View style={styles.container}> 
       <Text style={styles.headerText}>List of Contents</Text> 
       <Button onPress={()=> navigate('Detail')} title="Go to details"/> 
      </View> 
     ) 
    } 
} 

Detail.js:

export default class Detail extends React.Component { 
    render() { 
     return (
      <View> 
       <Text style={styles.headerText}>Details of the content</Text> 
      </View> 
     ) 
    } 
} 

chciałbym mieć dwa ekrany (NowList i SoonList) które są w zasadzie tego samego typu listą, więc używam tego samego składnika List dla obu ekranów. Z każdego z tych ekranów chcę przejść do szczegółów elementu, który w tym przypadku ma ten sam typ układu, więc używam składnika szczegółów dla obu elementów listy.

Wreszcie, po uruchomieniu aplikacji chcę wyświetlić ekran NowList. Korzystając z szuflady, chciałbym przejść do ekranu SoonList.

Nie wiem, jak skonfigurować tę trasę. Ale tak skonfigurowałem teraz trasy:

const NowStack = StackNavigator({ 
    NowList: { 
     screen: List, 
     navigationOptions: { 
      title: 'Now', 
     } 
    }, 
    Detail: { 
     screen: Detail, 
     navigationOptions: { 
      title: 'Detail', 
     } 
    } 
}); 

const SoonStack = StackNavigator({ 
    SoonList: { 
     screen: List, 
     navigationOptions: { 
      title: 'Soon', 
     } 
    } 
}); 

export const Drawer = DrawerNavigator({ 
    Now: { 
     screen: NowStack, 
    }, 
    Soon: { 
     screen: SoonStack, 
    } 
}); 

Podczas nawigacji z trasy NowList do trasy szczegółowej. Na trasie szczegółów znajduje się przycisk "Wstecz", który po naciśnięciu przechodzi do listy NowLista.

Po przejściu do Wkrótce trasę i przejściu do Trasy szczegółowej przejdę do ekranu szczegółów. Ale gdy naciśniesz przycisk Wstecz w nagłówku nawigacji szczegółowej, zamiast nawigować z powrotem do ekranu SoonList, jestem nawigowany do ekranu TerazLista.

Myślę, że coś tu brakuje, albo mój układ trasy nie jest taki, jak powinien. Czy możesz mi pomóc skonfigurować trasy tak, aby móc korzystać z DrawerNavigator do nawigacji na różnych ekranach, a z tych ekranów przejść do innego ekranu i ponownie do ekranu z którego można nawigować?

Answer 1

Możesz utworzyć nawigator stosu, który zawiera nawigator i szczegóły, dzięki czemu możesz uzyskać dostęp do listy zarówno teraz, jak i wkrótce listy z szuflady i przejść do ekranu szczegółów z obu list.

const App = StackNavigator({ 
    Drawer: { 
    screen: Drawer, 
    }, 
    Detail: { 
    screen: Detail, 
    navigationOptions: { 
     title: 'Detail', 
    }, 
    }, 
}); 

const Drawer = DrawerNavigator({ 
    NowList: { 
    screen: List, 
    }, 
    SoonList: { 
    screen: List, 
    }, 
}); 

Answer 2

Układ trasy nie określa ekranu Detail w nawigatorze SoonStack. Po przejściu do pozycji Detail nawigacja po systemie reaguje na jedyny ekran nazwany w ten sposób. Ponieważ jest w numerze NowStack, powrót do pierwszego ekranu w stosie.

Aby rozwiązać ten problem, można dodać kolejny ekran Detail do SoonStack nawigatora, jednak czego chcesz albo nazwę to inaczej, lub przejdź do każdego ekranu Detail używając swojego klucza.

Aby móc nawigować w prawo na ekranie Detail, można dodać parametr do każdego nawigatora stosu.

Na przykład:

const SoonStack = StackNavigator({ 
    SoonList: { 
     screen: List, 
     navigationOptions: { 
      title: 'Soon', 
     } 
    }, 
    SoonDetail: { 
     screen: Detail, 
     navigationOptions: { 
      title: 'Detail', 
     } 
    } 
},{ 
    initialRouteParams: { 
     detailScreen: 'SoonDetail' 
    } 
}); 

Następnie można użyć parametru, aby przejść do odpowiedniego ekranu.

Można także użyć pojedynczego z trzema odrębnymi ekranami, a reset stosem do właściwego ekranu przy przełączaniu z szufladą.

Możesz przeczytać więcej o resethere.

jak używać zresetować

Jeśli masz jeden nawigatora stosu:

const TheStack = StackNavigator({ 
    NowList: { screen: List, ... }, 
    SoonList: { screen: List, ... }, 
    Detail: {screen: Details, ... } 
}); 

Następnie szuflada może wyzerować stan stosu być cokolwiek chcesz. Na przykład, jeśli pierwszy ekran był NowList i SoonList kliknięciu w szufladzie, można zadzwonić:

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

spowodowałoby to stos, ażeby i mamy SoonList jako pierwszego ekranu. Jeśli szczegóły są otwarte, to jest drugie w stosie, a powrót zawsze powraca do właściwego ekranu.