TypeError: undefined is not an object (evalating 'navigation.navigate') - React Navigation答案

【问题标题】：TypeError: undefined is not an object (evaluating 'navigation.navigate') - React NavigationTypeError: undefined is not an object (evalating 'navigation.navigate') - React Navigation
【发布时间】：2021-08-13 17:24:47
【问题描述】：

我正在使用 onPress 处理 TouchaleOpacity 以导航到名为“Infocli”的屏幕，但不起作用...（onPress={() => navigation.navigate('Infocli')}）那个错误 TypeError: undefined is not an object (evalating 'navigation.navigate')

App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './telas/Home';
import Login from './telas/Login';
import Clientes from './telas/Clientes';
import Pedidos from './telas/Pedidos';
import Produtos from './telas/Produtos';
import Sincro from './telas/Sincro';
import Cadastro from './telas/Cadastro';
import Infocli from './telas/Infocli';

export default function App() {

  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='Login'>
        <Stack.Screen options={{headerShown:false}} name='Home' component={Home}  />
        <Stack.Screen options={{headerShown:false}} name='Login' component={Login}  />
        <Stack.Screen options={{headerShown:false}} name='Clientes' component={Clientes}  />
        <Stack.Screen  name='Infocli' component={Infocli}  />
        <Stack.Screen  name='Pedidos' component={Pedidos}  />
        <Stack.Screen options={{headerShown:false}} name='Produtos' component={Produtos}  />
        <Stack.Screen options={{headerShown:false}} name='Cadastro' component={Cadastro}  />
        <Stack.Screen name='Sincro' component={Sincro}  />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

出现错误的屏幕

import React, {useState} from 'react';
import { TouchableOpacity, View, Image, Text, StyleSheet } from 'react-native';

export default function ListItem ({ data, navigation}) {


  return (

      <TouchableOpacity 
        onLongPress={() => {alert('FUNFOU !')}} style={styles.item}
        onPress={() => navigation.navigate('Infocli')}
      >
        <View style={{flexDirection:'row',justifyContent:'flex-start', alignItems:'center'}}>
          <Image source={require('../../assets/spartan.png')} style={styles.itemPhoto} />
          <View style={styles.itemInfo}>
            <Text style={styles.itemP1}>{data.cod} - {data.name}</Text>
            <Text style={styles.itemP2}>{data.cnpj_cpf}</Text>
            <Text style={styles.itemP2}>{data.cidade} - {data.estado}</Text>
          </View>
        </View>
      </TouchableOpacity>
      
  );
};

【问题讨论】：

这能回答你的问题吗？ Getting undefined is not an object evaluating _this.props.navigation一点研究永远不会杀死任何人
如果这个答案解决了我的问题，我就不会发帖询问是否有人可以帮助我。
这个问题似乎在该问题的答案部分以及网络上的其他答案中都有很多可能的解决方案。我相信你会找到解决办法的。有了您分享的大量调试细节，我们不可能知道哪些解决方案可能适合您。所以要么做更多的研究并尝试自己解决它，要么分享你试图解决问题但没有成功的东西，这样我们就可以缩小可能的原因。
@MihaiT 我不同意，我认为 Pedro 的问题需要帮助没有任何问题（请参阅下面的答案）。
@HugoBounoua 我不同意。正如您在伪答案（更像是评论）中所显示的那样，OP 共享的调试细节数量不足以让我们找出问题的原因。否则，您不会在回答中使用问题。

标签： javascript react-native expo react-navigation

【解决方案1】：

我认为它不是您可以导航到的页面，因为它不在您的导航器列表中。因此，当您在页面中集成组件“ListItem”时，您可能只需将“导航”作为属性传递

编辑：（见下面的 cmets）

您需要将“导航”作为参数传递给您的组件，以便在“ListItem”中使用“导航”属性。

目前您没有通过它，这就是您的道具“导航”为空并且您收到错误的原因。你应该这样做：

<ListItem data={item} navigation={navigation} />

【讨论】：

感谢您尝试帮助我！我在平面列表中使用这个组件 } keyExtractor={(item) => item .id} />
太棒了！那你就有答案了。您需要将“导航”作为参数传递给组件，以便在“ListItem”中使用道具“导航”。目前您没有通过它，这就是您的道具“导航”为空并且您收到错误的原因。您应该这样做：如果对您有帮助，请不要犹豫验证此答案。