android - 任何导航器都未处理未定义有效负载的“导航”操作。（反应原生）

Question

我正在尝试构建一个有 5 个屏幕的应用程序，这是我的代码。++ 添加 APP.JS

// ./App.js

import React from "react";
import { NavigationContainer } from "@react-navigation/native";

import { MainStackNavigator } from "./Screens/StackNavigator";

import DrawerNavigator from "./Screens/DrawerNavigator";

 const App = () => {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}
export default App

*HOMESCREEN.JS*

import React from "react";
import { View, Button, Text, StyleSheet,Image } from "react-native";

const Home = ({navigation}) => {
  return (
    <View style = {styles.firstPage}>
    <View style = {styles.topHeader}><Text style={{fontSize:30}}>WORLD GUIDE</Text></View>
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Image
        style={styles.tinyLogo}
        source={require('../images/curvedArrow.png')}
      />
      <Text> SLIDE RIGHT TO START EXPLORE !</Text>
    </View>
    </View>
  );
};

*StackNavigator.JS*

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";

import Home from "./HomeScreen";
import Fransa from "./FransaScreen";
import FransaGezi from"./FransaGezi";

const Stack = createStackNavigator();

const MainStackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Page1-Trav" component={FransaGezi}/>
    </Stack.Navigator>
  );
}

const FransaStackNavigator = () => {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Fransa" component={Fransa} />
      </Stack.Navigator>
    );
  }



export { MainStackNavigator, FransaStackNavigator};

*FransaScreen.JS*

import React from "react";
import { View, StyleSheet, Text, Image,TouchableOpacity} from "react-native";
import Home from './HomeScreen'
import FransaGezi from './FransaGezi'

const Fransa = ({navigation}) => {
  return (
<View style = {styles.firstPage}>
      <View style = {styles.sectopHeader}>
      <Image
        style={styles.bigImage}
        source={require('../images/eskis.jpg')}
      />
      </View>

      <View style = {styles.botHeader}>
        
        <View style= {styles.firstBoxTop}>
          <View style = {styles.firstBox}>
           <TouchableOpacity onPress={() =>
          navigation.navigate(FransaGezi)
          }>
           <Image source={require('../images/gezi.png')} style = {styles.ImageClass} />
           </TouchableOpacity>
          </View>
          
          <View style = {styles.secBox}>
          <TouchableOpacity>
           <Image source={require('../images/food.png')} style = {styles.ImageClass} />
           </TouchableOpacity>
          </View>

        </View>
          
        <View style= {styles.firstBoxBot}>
          <View style = {styles.firstBox}>
          <TouchableOpacity>
           <Image source={require('../images/para.png')} style = {styles.ImageClass} />
           </TouchableOpacity>
          </View>
          <View style = {styles.secBox}>
          <TouchableOpacity>
           <Image source={require('../images/popmekan.png')} style = {styles.ImageClass} />
           </TouchableOpacity>
          </View>
        </View>
      
      </View>
    </View>
  );
};

*DrawerNavigator.JS*

import React from "react";

import { createDrawerNavigator } from "@react-navigation/drawer";

import { FransaStackNavigator } from "./StackNavigator";

import Home from "./HomeScreen";
import FransaGezi from "./FransaGezi";
import Fransa from "./FransaScreen";
import { StackActions } from "@react-navigation/native";
const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={Home} />
      <Drawer.Screen name="Fransa" component={FransaStackNavigator} />
    </Drawer.Navigator>
  );
}

export default DrawerNavigator;

*FransaGezi.JS*

import React from "react";
import { View, Button, Text, StyleSheet,Image } from "react-native";

const FransaGezi = ({}) => {
  return (
    <View style = {styles.firstPage}>
    <View style = {styles.topHeader}><Text style={{fontSize:30}}>NOLUR ÇALIŞ</Text></View>
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Image
        style={styles.tinyLogo}
        source={require('../images/curvedArrow.png')}
      />
      <Text> PLEASE WORK  !</Text>
    </View>
    </View>
  );
};

当我点击“Fransa”进入相关页面时，抽屉工作没有问题。但是当我点击 FransaScreen 中的第一张图片时

<TouchableOpacity onPress={() =>
          navigation.navigate(FransaGezi)
          }>

我收到此错误消息 >>> 未定义有效负载的操作“导航”未由任何导航器处理。

我知道我遗漏了有关 StackNavigator 屏幕的某些部分，但是当我像 navigation.navigate(Home) 一样更改它时，它会向我发送主页。等待您的帮助非常感谢:)

标签： androidreactjsreact-nativenavigationreact-navigation

Answer 1

在 React Native 中处理路由时，您必须牢记一些事情。首先是路线类型。在您的情况下，您使用的是 StackRoutes，因此基本结构是：

路由文件

import 'react-native-gesture-handler'

import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

import { Home } from './pages/Home'
import { Dashboard } from './pages/Dashboard'
import { Details } from './pages/Details'

const AppStack = createStackNavigator()

export const Routes = () => {
    return (
        <NavigationContainer>
            <AppStack.Navigator headerMode='none'>
                <AppStack.Screen name='Home' component={Home} />
                <AppStack.Screen name='Dashboard' component={Dashboard} />
                <AppStack.Screen name='Details' component={Details} />
            </AppStack.Navigator>
        </NavigationContainer>
    )
}

在您的应用程序中，我可以看到您有带有嵌套路由的路由。在这种情况下，您可以简单地在 AppStack.Screen 更改您的组件，并将您的路线放在那里。例子：

import DrawerNavigator from 'yout path here'
import FransaGezi from 'your path here too'

// If this is the main Routes component, you should decide what types of navigation you'll use. In this case, let's use a Stack

const AppStack = createStackNavigator()

const Routes = () => {
  return(
    <NavigationContainer>
      <AppStack.Navigator>
        <AppStack.Screen name='Some cool name' component={//here you can put a single component or another routes component, such as DrawerNavigator} />
      </Appstack.Navigator>
    </NavigationContainer>
  )

要在路线之间导航，您只需这样做

//import this hook in a page you want to navigate

import { useNavigation } from '@react-navigation/native'

//you can then use it in your component

const MyComponent = () => {

   const navigation = useNavigation()

   return (
      <Something onClick={() => navigation.navigate('here you need to put the name prop that you provided in your AppStack.Screen, for example, "Some cool name" as specified up in the Routes)} />
   )
}

加！如果我没有帮助你，这里是 React Navigation 的链接。你的疑惑肯定会在那里得到解答 :) React Navigation