не могу найти переменную навигацию

Question

Я использую реагирующую навигацию v5, и я пытаюсь перейти на страницу к другой, у меня есть два навигатора, bottomTabNavigator и стековый навигатор.

Точно, я пытаюсь go страницу после того, как я нажимаю на элемент из списка, который я получаю из моего бэкэнда и отправляю элемент из этого списка на другую страницу, но я получаю

не удается найти переменную навигацию

Это мой компонент Order, который отображает мой список

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

Вы можете использовать useNavigation hook следующим образом:

import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { CommonActions, useNavigation } from '@react-navigation/native' // <-- import useNavigation hook
// Remove CommonActions if you are using the onPress in the example

export default Order = (orders) => {

    const navigation = useNavigation() // <-- add this line

  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}
            // this works without CommonActions
            onPress={() => this.props.navigation.navigate('Détails', { orderId: item.id })} 
            // 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>
}

Answer 2

В вашем текущем коде вы можете получить доступ к навигации с orders, используя order.navigation.

Чтобы избежать двусмысленности, измените эту строку

export default Order = (orders) => {

на

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

А остальная часть вашего кода должна работать / перемещаться, как ожидалось.

Чтобы узнать о том, как в целом работает деструктуризация объектов, пожалуйста, go через эта статья