W nawigacji reagowania jaka jest różnica między nazwą trasy a kluczem?

Question

Jedną z rzeczy, która jest trochę zagmatwana, jest różnica między nazwą trasy a kluczem i dlaczego używałbyś jednego z drugim. I w jaki sposób obsługiwane są zduplikowane nazwy tras.

https://reactnavigation.org/docs/navigators/navigation-prop

Ten mówi, że używasz routeName, aby przejść do ekranu, a key jest „unikalny identyfikator używany do sortowania trasy.” Co to znaczy?

Wygląda na to, że nazwa trasy nie musi być unikalna, jak pokazano w moim przykładzie, ponieważ zarówno zewnętrzna zakładka, jak i wewnętrzny stos mają tę samą nazwę trasy. Gdy używasz funkcji nawigacji - przekazujesz nazwę trasy, czy zgadzasz się? Jeśli tak, to w jaki sposób rozróżnia się zduplikowane nazwy tras w zagnieżdżonych nawigatorach i kiedy należy użyć klucza?

 export TabsNavigator = TabNavigator({ 
      Home: { 
      screen:StackNavigator({ 
       Home: { screen: HomeScreen }, 
      }), 
      }, 
      Profile: { 
      screen: StackNavigator({ 
       Profile: { ProfileScreen }, 
      }), 
      }, 
     }); 

Dokumentacja zawiera przykładowe ustawienie klucza, ale nie mogę zrozumieć kontekst tego, co próbuje zrobić, albo dlaczego miałby to zrobić w przypadku rzeczywistego użytkowania. https://reactnavigation.org/docs/navigators/navigation-prop

import { NavigationActions } from 'react-navigation' 

const setParamsAction = NavigationActions.setParams({ 
    params: {}, // these are the new params that will be merged into the existing route params 
    // The key of the route that should get the new params 
    key: 'screen-123', 
}) 
this.props.navigation.dispatch(setParamsAction) 

Answer 1

użyć nazwy ekranie określonym w Navigator (np StackNavigator), aby otworzyć/wyświetlić ekran. Każdy ekran ma unikalny identyfikator, który jest kluczem. Na przykład. jeśli otworzysz dwa ekrany tego samego typu, będą one miały tę samą nazwę trasy, ale inny klucz.

Dzięki this.props.navigation.dispatch(NavigationActions.setParams(params: {val: 'val'}, key: 'home-1')); możesz zaktualizować stan nawigacji ekranu za pomocą klawisza 'home-1'. Na przykład. jeśli masz StackNavigator i ekran ustawień na górze ekranu głównego, możesz zaktualizować stan nawigacji (this.props.navigation.state.params) na ekranie głównym na ekranie ustawień.