Question

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

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

找不到变量导航

这是我的组件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钩子：

moment("2230", "HH:mm")
  .add(60, "minutes")
  .format("HH:mm")

Answer 2

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

不过，为避免歧义，请更改此行

export default Order = (orders) => {

到

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

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

要了解对象解构通常如何工作，请完成this article

Answer 3

在这里和其他地方都有很好的答案。我为我的独特问题找到了一个略有不同的解决方案，并在此处发布了它，以防它对其他人有所帮助。

我对代码进行了结构设计，以将常用功能分解为单独的组件（RN最佳实践）。原来我没有将“导航”传递给组件。现在，当我调用单独的组件时，我在父级中使用nav = {navigation}。在子组件中，我使用this.navigation = this.props.nav。然后，我可以使用navigation.navigate（'菜单名称'）

找不到变量导航

3 个答案: