如何使用嵌套的 Bottom Tab Navigator 将导航按钮添加到 React Navigation Stack header？

Question

我正在尝试在 react-native 中构建一个移动应用程序，但我在设置 React Navigation 时遇到了一些问题。

我想要实现的是一个导航到 'Home' 屏幕和 'Profile' 屏幕的底部选项卡导航器。在 'Home' 屏幕中，应该有一个按钮可以导航到 Header 中的 'Settings' 屏幕。

我已经到了这样的地步，我有一个可以在 'Home' 和 'Profile' 屏幕之间成功导航的底部选项卡导航器，以及 header 上的一个按钮使用堆栈导航 header 的设置屏幕。但是，我无法使用此按钮导航到 'Settings' 屏幕。

我的堆栈导航器代码是：

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

}

当我点击“设置”按钮时，出现错误：

“任何导航器都没有处理负载未定义的操作 'NAVIGATE'。

你有一个名为 'SettingScreen' 的屏幕吗？

在寻找此错误的解决方案时，我找到了这篇文章：Nesting Navigators

它建议将嵌套导航器保持在最低限度。对于这个 UI 设计，我的方法是否正确？有没有一种方法可以只使用一个导航器来实现这一点？

Answer 1

将其添加到您的渲染方法下方！

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

}

然后在onPress onPress={() => navigate(SettingScreen)}

希望这对您有所帮助

Answer 2

经过一段时间尝试解决这个问题后，我发现这个问题对我来说很愚蠢。 navigation.navigate 采用要导航到的屏幕的名称，但我给它的是组件。

为了解决我更改的问题

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

至

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

如何使用嵌套的 Bottom Tab Navigator 将导航按钮添加到 React Navigation Stack header？

How do I add a navigation button to a React Navigation Stack header with nested Bottom Tab Navigator?

react-native

react-navigation

react-navigation-stack

react-navigation-bottom-tab