react-native - 如何使用嵌套的底部选项卡导航器将导航按钮添加到 React 导航堆栈标题?
问题描述
我正在尝试以 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 Navigator
它建议将嵌套导航器保持在最低限度。我的方法甚至是进行此 UI 设计的正确方法吗?有没有办法只使用一个导航器来实现这一点?
解决方案
经过一段时间尝试解决这个问题后,我发现这个问题对我来说很愚蠢。navigation.navigate 采用要导航到的屏幕名称,但我给它的是组件。
为了解决我改变的问题
onPress={() => navigation.navigate(SettingScreen)}
至
onPress={() => navigation.navigate('Settings')}
推荐阅读
- c - 我正在尝试在一行上打印 16 个十六进制值
- flutter - 断言失败:布尔表达式在 Flutter 中不能为空
- clojure - 无法使用 clojure cli 工具执行 main 函数“运行”-Deps 和 CLI 指南
- json - JSON Schema - 结合 allOf 和 anyOf 来创建一个灵活的模式
- sql-server - Visual Studio/SSDT 2017 能否将 SQL 数据库项目部署/发布到 SQL Server 2014
- c++ - 常规循环到指针循环转换,如何?
- python - 随机数据帧
- artificial-intelligence - 为国际象棋引擎实现 alpha-beta 修剪的问题
- regex - 如何在崇高文本中使用正则表达式在第二个和第三个逗号之间选择特定内容?
- ios - Xcode 12、iPadOS14.0.1 应用程序无法从 Xcode 在设备上启动