错误：未定义不是对象（评估 this.props.navigation.navigate）

Question

我正在尝试在我的应用程序中实现，当我单击“详细信息”时，它会转到“detalhesJogadores”，但我没有收到错误“返回未定义不是对象（评估 this.props.navigation。导航）”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>    );}}详情Players.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>    );  }}index.jsThis 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';我想要关于如何继续解决这个问题的帮助，因为我不知道我在做什么了

Answer 1

我在没有课程的情况下制作了您的版本。这应该与钩子 useNavigation 一起使用。

这适用于 react-navigation v5.x

import React from 'react'

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

import { useNavigation } from '@react-navigation/native'

export default props => {

    const navigation = useNavigation()

    const detalhes = () => navigation.navigate('Detalhes')

    // or , if you need to send params too 

    // const detalhes = id => navigation.navigate('Detalhes',{playerId: id})

    return (

      <View style={styles.viewDentro}>

        <View style={styles.viewTop}>

          <Image source={props.imageUri} style={styles.imagem} />

            <View style={styles.viewBottom}>

                <Text style={styles.textoP}>{props.name}</Text>

                <Text style={styles.textoP}>{props.posicao}</Text>

                <TouchableOpacity style={styles.botao} title="Detalhes"

                onPress={detalhes}>

                  <Text style={styles.textoB}>Detalhes</Text>

                </TouchableOpacity>

            </View>

        </View>

      </View>

    )

}

const styles = StyleSheet.create({

    // styles here

})