Javascript 错误：undefined不是对象（评估this.props.navigation.navigate）

我试图在我的应用程序中实现，当我单击“详细信息”时，它会转到“detalhesJogadores”，但我没有收到错误“返回未定义的对象不是对象（评估此.props.navigation.navigate）”

listaindex.js

   eslint-disable prettier/prettier
    import {Text, View,StyleSheet,Image,TouchableOpacity} from 'react-native';
    import React, {Component} from 'react';


export default class JogadoresLista extends Component {
   detalhes = () => { this.props.navigation.navigate( 'Detalhes' )}
  render(){
    return (
      <View style={styles.viewDentro}>
        <View style={styles.viewTop}>
          <Image source={this.props.imageUri} style={styles.imagem} />
            <View style={styles.viewBottom}>
                <Text style={styles.textoP}>{this.props.name}</Text>
                <Text style={styles.textoP}>{this.props.posicao}</Text>
                <TouchableOpacity style={styles.botao} title="Detalhes"
                onPress={this.detalhes}>
                  <Text style={styles.textoB}>Detalhes</Text>
                </TouchableOpacity>
            </View>
        </View>
      </View>
    );
}

}

eslint禁用prettier/prettier
从“react native”导入{文本、视图、样式表、图像、TouchableOpacity}；
从“React”导入React，{Component}；
导出默认类JogadoresLista扩展组件{
detalhes=（）=>{this.props.navigation.navigate（'detalhes'）}
render（）{
返回(
{this.props.name}
{this.props.posicao}
细节
);
}
}

detalhesJogadores.js

/* eslint-disable no-trailing-spaces */
/* eslint-disable prettier/prettier */
import {Text, View, Image,StyleSheet} from 'react-native';
import React, {Component} from 'react';



export default class DetalhesJogadores extends Component {
  render(){

    return (
      <View style={styles.viewDentro}>
        <View style={styles.viewTop}>
            <View style={styles.viewBottom}>
                <Text style={styles.textoP}>Deu Certo</Text>
            </View>
        </View>
      </View>
    );  
}
}

/*eslint禁用无尾随空格*/
/*eslint禁用更漂亮/更漂亮*/
从“react native”导入{文本、视图、图像、样式表}；
从“React”导入React，{Component}；
导出默认类DetalhesJogadores扩展组件{
render（）{
返回(
德乌塞托
);  
}
}

index.js

This is the default page, where the user can click and go to the page

/* eslint-disable prettier/prettier */
import React from 'react';
import {Text, TouchableOpacity, View, ScrollView, StyleSheet, Image} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import JogadoresLista from '../jogadores/listaIndex';
import logoG from '../../images/icon.png';

export default function IndexPlayers() { 
  return (
    <SafeAreaView style={{flex:1}}>
    <View style={styles.home}>
    <ScrollView scrollEventThrottle={16}>
    <View style={styles.logoView}>
            <Image source={logoG} style={styles.imageLogo}/>
            <View>
            <Text style={styles.texto}>Principais Jogadores</Text>
            <Text style={styles.textoL}>GodoySoccer</Text>
            </View>
      </View>
      <ScrollView horizontal={false} showsHorizontalScrollIndicator={false}>
            <JogadoresLista
              imageUri={require('../../images/ronald-juv.jpg')}
              name="Cristiano Ronaldo"
              posicao="Extremo Esquerdo"/>
          </ScrollView>
      </ScrollView>
    </View>
    </SafeAreaView>
  );
}

这是默认页面，用户可以在其中单击并转到该页面
/*eslint禁用更漂亮/更漂亮*/
从“React”导入React；
从“react native”导入{Text，TouchableOpacity，View，ScrollView，StyleSheet，Image}；
从“反应本机安全区域上下文”导入{SafeAreaView}；
从“../jogadores/listaIndex”导入JogadoresLista；
从“../../images/icon.png”导入登录；
导出默认函数IndexPlayers（）{
返回(
慢跑爱好者
戈多足球
);
}

---

我想知道如何解决这个问题，因为我不知道自己在做什么了，所以我想得到一些帮助。我在没有课程的情况下制作了你的版本。这应该适用于钩子导航

这对于react navigation v5.x很好

从“React”导入React
从“react native”导入{文本、视图、图像、样式表、TouchableOpacity}
从'@react-navigation/native'导入{useNavigation}
导出默认道具=>{
const navigation=useNavigation（）
const detalhes=（）=>navigation.navigate（'detalhes'））
//或者，如果您也需要发送参数
//const detalhes=id=>navigation.navigate（'detalhes'，{playerId:id}）
返回(
{props.name}
{props.posicao}
细节
)
}
const styles=StyleSheet.create({
//这里的风格
})

我在没有类的情况下制作了你的版本。这应该适用于钩子导航

这对于react navigation v5.x很好

从“React”导入React
从“react native”导入{文本、视图、图像、样式表、TouchableOpacity}
从'@react-navigation/native'导入{useNavigation}
导出默认道具=>{
const navigation=useNavigation（）
const detalhes=（）=>navigation.navigate（'detalhes'））
//或者，如果您也需要发送参数
//const detalhes=id=>navigation.navigate（'detalhes'，{playerId:id}）
返回(
{props.name}
{props.posicao}
细节
)
}
const styles=StyleSheet.create({
//这里的风格
})

根据我的意见，您可以这样尝试：-onPress={this.details}和outside render定义一个名为details的箭头函数，如下所示：-details=（）=>{this.props.navigation.navigation（'Detalhes'）}这将根据我的情况工作。它不适用于我，我按照您的要求放置，但我有相同的错误，我编辑了代码部分，看看我是否做对了，你有其他建议吗？你能给我发送路由页面吗？删除标题并添加这个，即从“react navigation”导入{StackNavigator}到您的屏幕。它与CevaComic提到的方法一起工作，但非常感谢您的关注。根据我的意见，您可以这样尝试：-onPress={this.details}和外部渲染定义一个名为details的箭头函数，如下：-details=（）=>{this.props.navigation.navigate（'Detalhes'）}这将根据我的工作。它不适合我，我把它作为你问，但我有相同的错误，我编辑了代码部分，看看我做得是否正确，你有其他建议吗？你能给我发送路由页面吗？删除标题并添加这个，即从“react navigation”中

导入{StackNavigator}到你的屏幕。它与CevaComic提到的方法一起工作，但非常感谢你的关注，兄弟