Как передать имя текущего маршрута другому компоненту в «реакции-навигации», который не находится внутри контейнера приложения

Question

У меня есть пользовательская панель навигации, расположенная рядом с моим AppContainer, и я хочу сделать некоторую логику на основе текущего имени маршрута моего навигатора, как я могу это сделать?

Я пытался пройтинавигация как ссылка, как описано здесь https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html, но в этой навигационной опоре у меня нет текущего имени маршрута.

const [navigation, setNavigation] = useState(null);

<AppContainer ref={nav => setNavigation(nav)} />
<NavBar navigation={navigation} />

const NavBar = ({ navigation }) => {
    return <div>{navigation.state.routeName}</div> 
};

// routeName is undefined

Answer 1

Вы можете получить текущий routeName объекта навигатора, как показано ниже:

const {state: {routes, index}} = navigation;
const currentRouteName = routes[index];

фактически все маршруты объекта навигатора находятся в routes свойстве, которое вы определяете при создании навигатора;свойство index - это номер индекса в routes, к которому в данный момент приложение недавно было перемещено.

Примечание , если ваш текущий routes[index] является внутренним навигатором (как и stackNavigator в в составе pocketNavigator), вы должны сделать то же самое выше для внутреннего навигатора, чтобы получить реальное имя маршрута, к которому в данный момент перемещается приложение.

Однако, похоже, ваш случай не слишком сложен, и вы можете получитьимя маршрута, которое вы хотите, применяя указанный выше код к вашему navigation объекту только один раз.