找不到变量导航

Question

我正在使用react-navigation v5，我试图导航到另一个页面，我有两个导航器，一个bottomTabNavigator和一个堆栈导航器。

确切地说，我要在从后端获取的列表中单击该项目并将该列表中的元素发送到另一页后得到的页面，但是我得到了

找不到变量导航

这是我的组件订单，显示了我的列表

import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { CommonActions } from '@react-navigation/native'

export default Order = (orders) => {
  const listOfOrder = orders.orders.map((item) => {
    let date = new Date(item.created_at)
    console.log('status',item.status)
    if(item.status === 'waiting for rider' || item.status === 'in progress' || item.status === 'cooking') {
      return (
        <View>
          <TouchableOpacity
            style={styles.buttonOrderContainer}
            // onPress={() => this.props.navigation.navigate('Détails')}>
            onPress={() => navigation.dispatch(CommonActions.navigate({
              name:'Détails',
              params: {
                orderId: item.id
              }
            }))}>
            <Text style={styles.orderText}>
              Reçu le : {date.getDate()} / {date.getMonth()} /{' '}
              {date.getFullYear()}
            </Text>
            <Text style={styles.orderText}>
              A : {date.getHours()}h{date.getMinutes()}
            </Text>
            <Text style={styles.orderText}>
              Nombre de produits : {item.products.length}
            </Text>
            <Text style={styles.orderText}>
              Total de la commande : {item.totalPrice.toFixed(2)}€
            </Text>
          </TouchableOpacity>
        </View>
      )
    }
  })
  return <View>{listOfOrder}</View>
}

这是我的导航器

const Tab = createBottomTabNavigator()

export const TabNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName

          if (route.name === 'Commandes') {
            iconName = focused
              ? 'ios-information-circle'
              : 'ios-information-circle-outline'
          } else if (route.name === 'Historique') {
            iconName = focused ? 'ios-list-box' : 'ios-list'
          }

          // You can return any component that you like here!
          return <Ionicons name={iconName} size={size} color={color} />
        },
      })}
      tabBarOptions={{
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
      }}>
      <Tab.Screen name="Connexion" component={LoginScreen} />
      <Tab.Screen name="Commandes" component={StackNavigator} />
      <Tab.Screen name="Historique" component={OrderScreen} />
    </Tab.Navigator>
  )
}

const Stack = createStackNavigator()

export const StackNavigator = () => {
  return (
    <Stack.Navigator initialRouteName="LoginScreen">
      <Stack.Screen name="Commandes" component={HomeScreen} />
      <Stack.Screen name="Historique" component={OrderScreen} />
      <Stack.Screen name="Connexion" component={LoginScreen} />
      <Stack.Screen name="Détails" component={OrderDetailScreen} />
    </Stack.Navigator>
  )
}

Answer 1

在当前代码中，您可以使用orders从order.navigation访问导航。

但是为了避免歧义，请更改此行

export default Order = (orders) => {

到

export default Order = ({orders, navigation}) => {

您的其余代码应按预期工作/导航。

要了解对象解构通常如何工作，请通过this article进行>