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）一样更改它时，它将发送给我主页。等待您的帮助非常感谢：）

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

未定义有效负载的操作“导航”未由任何导航器处理。（本机反应）

1 个答案:

未定义有效负载的操作“导航”未由任何导航器处理。 （本机反应）

1 个答案:

未定义有效负载的操作“导航”未由任何导航器处理。（本机反应）