错误：未定义不是对象（评估 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.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';

我想要关于如何继续解决这个问题的帮助，因为我不知道我在做什么了

Answer 1

我在没有课程的情况下制作了您的版本。这应该与钩子 useNavigation 一起使用。这适用于 react-navigation v5.ximport React from 'react'import { Text, View, Image, StyleSheet, TouchableOpacity } from 'react-native'import { useNavigation } from '@react-navigation/native'export default props => {&nbsp; &nbsp; const navigation = useNavigation()&nbsp; &nbsp; const detalhes = () => navigation.navigate('Detalhes')&nbsp; &nbsp; // or , if you need to send params too&nbsp;&nbsp; &nbsp; // const detalhes = id => navigation.navigate('Detalhes',{playerId: id})&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <View style={styles.viewDentro}>&nbsp; &nbsp; &nbsp; &nbsp; <View style={styles.viewTop}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Image source={props.imageUri} style={styles.imagem} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <View style={styles.viewBottom}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={styles.textoP}>{props.name}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={styles.textoP}>{props.posicao}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TouchableOpacity style={styles.botao} title="Detalhes"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPress={detalhes}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={styles.textoB}>Detalhes</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TouchableOpacity>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; )}const styles = StyleSheet.create({&nbsp; &nbsp; // styles here})