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

Posted

技术标签:

【中文标题】如何使用嵌套的底部选项卡导航器将导航按钮添加到 React 导航堆栈标题?【英文标题】:How do I add a navigation button to a React Navigation Stack header with nested Bottom Tab Navigator? 【发布时间】:2021-04-27 15:12:48 【问题描述】:

我正在尝试使用 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>
);

当我点击设置按钮时,我得到了错误:

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

你有一个名为“SettingScreen”的屏幕吗?”

在寻找此错误的解决方案时,我发现了这篇文章:Nesting Navigators

建议尽量减少嵌套导航器。我的方法甚至是进行此 UI 设计的正确方法吗?有没有办法只使用一个导航器来实现这一点?

【问题讨论】:

【参考方案1】:

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

为了解决我改变的问题

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

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

【讨论】:

【参考方案2】:

在你的渲染方法下面添加这个!

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


然后在 onPress onPress=() =&gt; navigate(SettingScreen)

希望这会有所帮助

【讨论】:

这个解决方案给了我和我最初一样的错误。但是,您的回答确实帮助我发现了功能组件和类组件之间的区别,非常感谢! (我对 react-native 和 javascript 很陌生)

以上是关于如何使用嵌套的底部选项卡导航器将导航按钮添加到 React 导航堆栈标题?的主要内容,如果未能解决你的问题,请参考以下文章

从反应原生底部选项卡导航器的标题导航

Flutter:带有嵌套导航的底部导航栏和更改选项卡时恢复根页面

Android学习笔记---使用TabHost实现微信底部导航栏效果

在 React Native 中始终显示底部选项卡导航器 React Navigation 5

底部导航视图中选定选项卡的颜色

尝试在 react-native 的底部选项卡导航上添加图像时面临问题