错误:undefined不是对象(正在评估this.props.navigation.anavigation)

Question

我正试图在我的应用程序中实现，当我点击"Details"时，它会转到"detalhesJogadores"，但我没有得到错误"返回undefined不是对象(正在评估this.props.navigation.anavigation(">

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>
);
}
}

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>
);  
}
}

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>
);
}

默认页面页面详细信息Jogadores

我想要一个关于我应该如何进行的帮助，以解决这个问题，因为我不知道我做什么了

Answer 1

我制作了没有类的版本。这应该与钩子useNavigation一起使用。

这适用于react导航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
})