Question

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

}

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

“任何导航器都未处理未定义有效负载的“导航”操作。

您有名为“SettingScreen”的屏幕吗？”

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

它建议将嵌套导航器保持在最低限度。我的方法甚至是进行此 UI 设计的正确方法吗？有没有办法只使用一个导航器来实现这一点？

Answer 1

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

为了解决我改变的问题

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

到

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

Answer 2

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

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

}

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

希望这会有所帮助

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

2 个答案: