Блог

Главная - Вопросы по программированию - Доступ к объекту навигации родительского стекового навигатора с вложенного дочернего экрана

Доступ к объекту навигации родительского стекового навигатора с вложенного дочернего экрана

#react-native #react-navigation #react-navigation-v5

#react-native #react-навигация #react-navigation-v5

Вопрос:

Я использую React Navigation v5 в своем проекте react-native.

У меня есть навигатор вложенного стека.

Родительский стековый навигатор MyParentFlow , в котором есть экранный компонент, в котором размещен другой стековый навигатор:

 const MyParentFlow = ({route, navigation}) => {

   const MyStack = createStackNavigator();

  return (
    <MyStack.Navigator
       initialRouteName={...}
       ...>
       {/*HERE is the nested children stack navigator*/}
       <MyStack.Screen
         name={FLOWS.MyChildrenFlow}
         component={MyChildrenFlow}
       />
       <MyStack.Screen .../>
       ...
    </MyStack.Navigator>
)
}

Мой навигатор вложенного стека MyChildrenFlow :

 const MyChildrenFlow = ({route, navigation}) => {

   const MyStack = createStackNavigator();


  return (
    <MyStack.Navigator
       initialRouteName={...}
       ...>
       {/*HERE is a child screen in the nested navigator*/}
       <MyStack.Screen 
         name="MyChildScreen"
         component={MyChildScreen}
       />
       <MyStack.Screen .../>
       ...
    </MyStack.Navigator>
)
}

На дочернем экране, размещенном в навигаторе вложенного стека:

 const MyChildScreen =({navigation})=> {
    /* I need to set options for the header of the parent's navigation */
    navigation.setOptions({
    headerRight: () => (
      ...
      />
    ),
  });

}

На дочернем экране, размещенном в навигаторе вложенного стека, мне нужно установить заголовок via navigation для родительского навигатора. Мой приведенный выше код не работает, потому что navigation этот объект принадлежит вложенному стековому навигатору, а не родительскому.

Мой вопрос в том, как я могу получить доступ к родительскому навигатору на вложенном дочернем экране и задать для него параметры навигации?

Ответ №1:

Попробуйте это

 navigation.getParent().dispatch(
                    CommonActions.navigate({
                            name: 'screenName',
                            params: {},
                        }
                    ))

Ответ №2:

Вы можете получить к нему доступ с помощью dangerouslyGetParent() 

 const parent = navigation.dangerouslyGetParent();

https://reactnavigation.org/docs/navigation-prop/#dangerouslygetparent

Комментарии:

1. уверен, что это не так. он либо вернет объект навигации, либо не определен. нет случая, когда он возвращает пустой объект. (источник: я поддерживаю навигацию react)

2. Интересно, я также почти уверен, поскольку код и журналы передо мной сейчас говорят мне, что parent это {} так. Вы пробовали? Это то, что я пробовал: const MyChildScreen =({navigation})=> { const parent = navigation.dangerouslyGetParent(); console.log(`parent: ${JSON.stringify(parent)}`); } , говорят журналы parent: {} . Очень очевидный результат, не так ли? Но спасибо вам в любом случае

3. У меня такое чувство, что ваш ответ не для React Navigation v5, если вы видите мой вопрос, я использую React Navigation v5.

4. Почему вы делаете JSON.stringify? Объект навигации содержит только функции, что вы ожидаете увидеть в печатном объекте после его JSON.stringify? Функции не могут быть строковыми, поэтому, очевидно, он печатает пустой объект.

5. Хорошо, поскольку я не знаю, возвращает эта функция json или нет, ваш ответ ничего не говорит. Я думал, что это объект json. И ссылка, которую вы предоставили, также говорит This method returns the state object of the navigator which contains the screen. , что в любом случае, я попробовал еще раз, не рассматривая его как JSON, результат таков parent: [object Object] . Это navigation объект навигатора родительского стека? Я имею в виду, что я спрашиваю, потому что я не знаю, что это за [object Object]. Могу ли я напрямую setOptions(...) с этим вернуться?

Метки: