任何导航器错误未处理有效负载'NAVIGATE'的操作

Question

我是react-native的新手，我已经搜索了很多关于这个错误的信息。所以问题是，我正在创建一个简单的博客应用与wordpress rest api。

结构是HOME ->(加载所有的帖子)->(OnPress)→详情(显示单篇文章)。

我打开了两个屏幕，分别是home和detail。

我正在使用Params导航到详细信息屏幕。

问题是，当我使用堆栈导航/本机堆栈导航时，它可以工作。

由于我有多个类别，我不想显示"详细信息"屏幕。

就像底部导航一样，它应该只有"Home"而不是Details屏幕，因为它将返回没有任何参数的错误。

我尝试过嵌套导航，但我认为我做错了什么。

下面是代码和截图。

RootNavigator.js

import { View, Text } from "react-native";
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/Home";
import "react-native-gesture-handler";
import Details from "../screens/Details";
const Stack = createStackNavigator();
const RootNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Details" component={Details} />
</Stack.Navigator>
);
};
export default RootNavigator;

AppNavigation.js

import React from "react";
import { StatusBar } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer, DefaultTheme } from "@react-navigation/native";
import "react-native-gesture-handler";
import { DrawerActions } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { Button } from "react-native-elements";
import RootNavigator from "./RootNavigator";

const AppNavigator = () => {
return (
<NavigationContainer>
<RootNavigator />
</NavigationContainer>
);
};
export default AppNavigator;

Answer 1

为了不在底部选项卡导航器中显示详细信息页面，您需要创建一个新的堆栈

例如:

HomeNavigator.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/Home";
import Details from "../screens/Details";
const Stack = createStackNavigator();
const HomeNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Details" component={Details} />
</Stack.Navigator>
);
};
export default HomeNavigator;

现在在TabNavigator:

TabNavigator.js

import React from "react";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeNavigator from "./HomeNavigator";
const Tab = createBottomTabNavigator();
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeNavigator} />
</Tab.Navigator>
);
};
export default TabNavigator;

现在你可以简单地从主页导航到详细信息:

navigation.navigate("Details", YOUR_PARAMS_HERE)