Блог

Я пытаюсь создать приложение с 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), он отправляет мне домашнюю страницу. Жду вашей помощи, большое спасибо 🙂

При работе с маршрутами в 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.Отобразите и поместите туда свои маршруты. Пример:

 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)} />
   )
}

  

Plus! Если я вам не помог, вот ссылка на React Navigation. На ваши сомнения наверняка найдется ответ 🙂 Реагирующая навигация