如何使用嵌套的底部选项卡导航器将导航按钮添加到 React 导航堆栈 header？

Question

I am trying to build a mobile app in react-native and I'm having some problems setting up React Navigation.

What I want to achieve is a Bottom Tab Navigator that Navigates to the 'Home' screen and the 'Profile' Screen. From the 'Home' screen, there should be a button to navigate to the 'Settings' screen in the Header.

I have got to the point where I have a Bottom Tab Navigator that can successfully navigate between the 'Home' and 'Profile' screens, as well as a button on the header for the Settings screen using the Stack navigation header. However, I am having trouble navigating to the 'Settings' screen with this button.

My code for the Stack navigator is:

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>
);

}

When I click on the Settings button, I get the error:

"The action 'NAVIGATE' with payload undefined was not handled by any navigator.

Do you have a screen named 'SettingScreen'?"

Upon looking for a solution to this error I found this article: Nesting Navigators

It recommends keeping nested navigators to a minimal. Is my method even the right way about going for this UI design? Is there a way to achieve this with only using one navigator?

Answer 1

After some time trying to solve this I found the problem was quite silly of me. navigation.navigate takes the name of the screen to navigate to, but I was giving it the component.

To fix the problem I changed

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

to

onPress={() => navigation.navigate('Settings')}

Answer 2

Add this below your render method!

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

}

And then in the onPress onPress={() => navigate(SettingScreen)}

Hopefully this helps