React Native 任何导航器都未处理带有有效负载的操作“NAVIGATE”错误

c9x0cxw0  于 2023-04-12  发布在  React
关注(0)|答案(1)|浏览(119)

我是react-native的新手,我已经搜索了很多关于这个错误的信息。所以问题是我正在用wordpress rest API创建一个简单的博客应用程序。
因此,结构是HOME -〉(加载所有帖子)-〉(OnPress)-〉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;
polhcujo

polhcujo1#

为了不在底部选项卡导航器中显示Details页面,您需要创建一个新堆栈
例如:
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)

相关问题