Блог

У меня есть очень простой функциональный компонент для просмотра списка заказов на продажу. Я бы хотел, чтобы, щелкнув по этому списку, я перешел на страницу сведений о рассматриваемом заказе.

Я не понимаю, почему я не могу перенаправить с помощью ‘navigation.navigate(‘OrderDetails’)}’

Но я получаю

undefined не является объектом (оценка ‘navigation.navigate’)

Это происходит ТОЛЬКО на этом конкретном экране… остальные работают нормально. итак, я блуждал, если это не связано с синтаксисом в listitem, может кто-нибудь попытаться помочь мне с этим? Большое спасибо за время и объяснения.

 import * as React from 'react';
import { View } from 'react-native';
import { ListItem, Icon } from 'react-native-elements'

const list = [
    
      {
        title: 'Commande 1',
        icon: 'av-timer'
    },
    {
        title: 'Commande 2',
        icon: 'flight-takeoff'
    },
      {
        title: 'Commande 3',
        icon: 'av-timer'
    },
    {
        title: 'Commande 4',
        icon: 'flight-takeoff'
    },
      {
        title: 'Commande 5',
        icon: 'av-timer'
    },
    {
        title: 'Commande 6',
        icon: 'flight-takeoff'
    },
    
    ]



export default function Terminated({navigation}) {

    return (
<View>
  {
    list.map((item, i) => (
      <ListItem key={i} bottomDivider
                button onPress={() => navigation.navigate('OrderDetails')}>
        <Icon name={item.icon} />
        <ListItem.Content>
          <ListItem.Title>{item.title}</ListItem.Title>
        </ListItem.Content>
        <ListItem.Chevron />
      </ListItem>
    ))
  }
</View>
    );
  }
  

Навигация :

 import React from 'react';
import { Image } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator} from "@react-navigation/stack";
import { NavigationContainer } from '@react-navigation/native';
import Authentication from '../../Screens/Authentication';
import Activities from '../../Screens/Activities';
import Login from '../../Screens/Authentication/Login';
import Signup from '../../Screens/Authentication/Signup';
import Tools from '../../Screens/Tools';
import Dashboard from '../../Screens/Dashboard';
import Orders from '../../Screens/Orders';
import Terminated from '../../Screens/Orders/Terminated';
import Ongoing from '../../Screens/Orders/Ongoing';
import OrderDetails from '../../Screens/Orders/OrderDetails';
import Settings from '../../Screens/Settings';
import Scan from '../../Screens/Tools/Scan';
import Products from '../../Screens/Tools/Products';
import Tickets from '../../Screens/Tools/Tickets';
import Welcome from '../../Screens/Welcome';
import i18n from '../../src/i18n';
import styles from '../../assets/styles';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function ScreenNavigator() {
  return(
    <Stack.Navigator>       
      <Stack.Screen name = 'Orders' component = {Orders}/> 
      <Stack.Screen name = 'Authentication' component = {Authentication}/>  
      <Stack.Screen name = 'Activities' component = {Activities}/>  
      <Stack.Screen name = 'Login' component = {Login}/>
      <Stack.Screen name = 'Signup' component = {Signup}/>
      <Stack.Screen name = 'Tools' component = {Tools}/>
      <Stack.Screen name = 'Scan' component = {Scan}/>      
      <Stack.Screen name = 'Ongoing' component = {Ongoing}/>
      <Stack.Screen name = 'Terminated' component = {Terminated}/>
      <Stack.Screen name = 'OrderDetails' component = {OrderDetails}/> 
      <Stack.Screen name = 'Products' component = {Products}/>      
      <Stack.Screen name = 'Tickets' component = {Tickets}/>
      <Stack.Screen name = 'Dashboard' component = {Dashboard}/>
      <Stack.Screen name = 'Settings' component = {Settings}/>
      <Stack.Screen name = 'Welcome' component = {Welcome}/>
    </Stack.Navigator>
  )
}

export default function AppNavigation() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Orders"
                     tabBarOptions={{activeTintColor: '#F78400'}}>
        <Tab.Screen
          name={i18n.t("app.auth")}
          component={ScreenNavigator}
          options={{
              tabBarIcon: ({ focused, horizontal, tintColor }) => {
                return (
                  <Image
                    source={require("../../assets/images/authentication.png")}
                    style={styles.icon}
                  />
                );
              }
          }}
        />
        <Tab.Screen
          name={i18n.t("app.dash")}
          component={Dashboard}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../../assets/images/dashboard.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name={i18n.t("app.tools")}
          component={Tools}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../../assets/images/tools.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name={i18n.t("app.settings")}
          component={Settings}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../../assets/images/settings.png")}
                  style={styles.icon}
                />
              );
            }
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  )
}