找不到变量导航

Question

我正在使用react-navigation v5，我正在尝试从一个页面导航到另一个页面，我有两个导航器，一个bottomTabNavigator和一个stack navigator。

\n\n

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

\n\n

\n

找不到变量导航

\n

\n\n

这是我的组件订单，它呈现我的列表

\n\n

import React from \'react\'\nimport { View, Text, TouchableOpacity } from \'react-native\'\nimport { CommonActions } from \'@react-navigation/native\'\n\nexport default Order = (orders) => {\n  const listOfOrder = orders.orders.map((item) => {\n    let date = new Date(item.created_at)\n    console.log(\'status\',item.status)\n    if(item.status === \'waiting for rider\' || item.status === \'in progress\' || item.status === \'cooking\') {\n      return (\n        <View>\n          <TouchableOpacity\n            style={styles.buttonOrderContainer}\n            // onPress={() => this.props.navigation.navigate(\'D\xc3\xa9tails\')}>\n            onPress={() => navigation.dispatch(CommonActions.navigate({\n              name:\'D\xc3\xa9tails\',\n              params: {\n                orderId: item.id\n              }\n            }))}>\n            <Text style={styles.orderText}>\n              Re\xc3\xa7u le : {date.getDate()} / {date.getMonth()} /{\' \'}\n              {date.getFullYear()}\n            </Text>\n            <Text style={styles.orderText}>\n              A : {date.getHours()}h{date.getMinutes()}\n            </Text>\n            <Text style={styles.orderText}>\n              Nombre de produits : {item.products.length}\n            </Text>\n            <Text style={styles.orderText}>\n              Total de la commande : {item.totalPrice.toFixed(2)}\xe2\x82\xac\n            </Text>\n          </TouchableOpacity>\n        </View>\n      )\n    }\n  })\n  return <View>{listOfOrder}</View>\n}\n

\n\n

这是我的导航器

\n\n

const Tab = createBottomTabNavigator()\n\nexport const TabNavigator = () => {\n  return (\n    <Tab.Navigator\n      screenOptions={({ route }) => ({\n        tabBarIcon: ({ focused, color, size }) => {\n          let iconName\n\n          if (route.name === \'Commandes\') {\n            iconName = focused\n              ? \'ios-information-circle\'\n              : \'ios-information-circle-outline\'\n          } else if (route.name === \'Historique\') {\n            iconName = focused ? \'ios-list-box\' : \'ios-list\'\n          }\n\n          // You can return any component that you like here!\n          return <Ionicons name={iconName} size={size} color={color} />\n        },\n      })}\n      tabBarOptions={{\n        activeTintColor: \'tomato\',\n        inactiveTintColor: \'gray\',\n      }}>\n      <Tab.Screen name="Connexion" component={LoginScreen} />\n      <Tab.Screen name="Commandes" component={StackNavigator} />\n      <Tab.Screen name="Historique" component={OrderScreen} />\n    </Tab.Navigator>\n  )\n}\n\nconst Stack = createStackNavigator()\n\nexport const StackNavigator = () => {\n  return (\n    <Stack.Navigator initialRouteName="LoginScreen">\n      <Stack.Screen name="Commandes" component={HomeScreen} />\n      <Stack.Screen name="Historique" component={OrderScreen} />\n      <Stack.Screen name="Connexion" component={LoginScreen} />\n      <Stack.Screen name="D\xc3\xa9tails" component={OrderDetailScreen} />\n    </Stack.Navigator>\n  )\n}\n

\n

Answer 1

您可以像这样使用 useNavigation 挂钩：

\n\n

import React from \'react\'\nimport { View, Text, TouchableOpacity } from \'react-native\'\nimport { CommonActions, useNavigation } from \'@react-navigation/native\' // <-- import useNavigation hook\n// Remove CommonActions if you are using the onPress in the example\n\nexport default Order = (orders) => {\n\n    const navigation = useNavigation() // <-- add this line\n\n  const listOfOrder = orders.orders.map((item) => {\n    let date = new Date(item.created_at)\n    console.log(\'status\',item.status)\n    if(item.status === \'waiting for rider\' || item.status === \'in progress\' || item.status === \'cooking\') {\n      return (\n        <View>\n          <TouchableOpacity\n            style={styles.buttonOrderContainer}\n            // this works without CommonActions\n            onPress={() => this.props.navigation.navigate(\'D\xc3\xa9tails\', { orderId: item.id })} \n            // onPress={() => navigation.dispatch(CommonActions.navigate({\n            //   name:\'D\xc3\xa9tails\',\n            //   params: {\n            //     orderId: item.id\n            //   }\n            // }))}\n            >\n            <Text style={styles.orderText}>\n              Re\xc3\xa7u le : {date.getDate()} / {date.getMonth()} /{\' \'}\n              {date.getFullYear()}\n            </Text>\n            <Text style={styles.orderText}>\n              A : {date.getHours()}h{date.getMinutes()}\n            </Text>\n            <Text style={styles.orderText}>\n              Nombre de produits : {item.products.length}\n            </Text>\n            <Text style={styles.orderText}>\n              Total de la commande : {item.totalPrice.toFixed(2)}\xe2\x82\xac\n            </Text>\n          </TouchableOpacity>\n        </View>\n      )\n    }\n  })\n  return <View>{listOfOrder}</View>\n}\n

\n