Question

我有一个非常简单的功能组件，用于查看销售订单清单。我希望通过单击此列表来进入有问题的订单的详细信息页面。

我不明白为什么我不能使用 'navigation.navigate（'OrderDetails'）}'

重定向

但是我明白了

未定义不是对象（正在评估“ 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>
  )
}

Answer 1

我尝试过这种方式：

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


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 Completed() {
const navigation = useNavigation(); 

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

但是现在错误是：

ReferenceError：找不到变量：useNavigation

我真的不明白...

使用ListItem重定向错误：undefined不是对象（评估'navigation.navigate'）

1 个答案: