Как добавить кнопку навигации в заголовок React Navigation Stack с вложенным навигатором нижней вкладки?

Я пытаюсь создать мобильное приложение на языке React-native, и у меня возникли проблемы с настройкой React Navigation.

Я хочу достичь нижнего навигатора вкладок, который переходит на экран «Домой» и экран «Профиль». На главном экране должна быть кнопка для перехода к экрану «Настройки» в заголовке.

Я дошел до того, что у меня есть навигатор нижней вкладки, который может успешно перемещаться между экранами «Домой» и «Профиль», а также кнопка в заголовке экрана настроек с помощью заголовка навигации по стеку. Однако у меня возникают проблемы с переходом на экран «Настройки» с помощью этой кнопки.

Мой код для навигатора стека:

const MainStackNavigator = () => {
return (
  <Stack.Navigator screenOptions={screenOptionStyle}>
    <Stack.Screen 
        name="Home" 
        component={HomeScreen} 
        options = { ({navigation}) => ({
            title: "Home",
            headerStyle: {
                backgroundColor: '#ff6600',
            },
            headerRight:  () => (
              <Button
                onPress={() => navigation.navigate(SettingScreen)}
                title="Settings"
                color="#fff"
              />
            )
        })}
    />
    <Stack.Screen name="Settings" component={SettingScreen} />
  </Stack.Navigator>
);

}

Когда я нажимаю кнопку «Настройки», я получаю сообщение об ошибке:

Действие «НАВИГАЦИЯ» с неопределенной полезной нагрузкой не было обработано ни одним навигатором.

У вас есть экран с названием «Экран настроек»?

В поисках решения этой ошибки я нашел эту статью: Вложенные навигаторы

Он рекомендует свести количество вложенных навигаторов к минимуму. Подходит ли мой метод к этому дизайну пользовательского интерфейса? Есть ли способ добиться этого, используя только один навигатор?


react-native react-navigation react-navigation-bottom-tab react-navigation-stack
person Adam    schedule 23.01.2021    source источник

Ответы (2)


arrow_upward
1
arrow_downward

После некоторого времени, пытаясь решить эту проблему, я обнаружил, что проблема была довольно глупой с моей стороны. navigation.navigate принимает имя экрана, к которому нужно перейти, но я давал ему компонент.

Чтобы решить проблему, я изменил

onPress={() => navigation.navigate(SettingScreen)}

to

onPress={() => navigation.navigate('Settings')}
person Adam    schedule 23.01.2021

arrow_upward
0
arrow_downward

Добавьте это под свой метод рендеринга!

render () {
const { navigate } = this.props.navigation;

}

А потом в onPress onPress={() => navigate(SettingScreen)}

Надеюсь, это поможет

person JasonBeedle    schedule 23.01.2021
comment
Это решение давало мне ту же ошибку, что и у меня изначально. Однако ваш ответ помог мне обнаружить разницу между функциональными компонентами и компонентами класса, так что спасибо за это! (Я очень новичок в react-native и JavaScript) - person Adam; 24.01.2021