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

【问题标题】：Error: undefined is not an object (evaluating this.props.navigation.navigate)错误：未定义不是对象（评估 this.props.navigation.navigate）
【发布时间】：2020-04-21 21:22:40
【问题描述】：

我试图在我的应用程序中实现，当我点击“详细信息”时，它会转到“detalhesJogadores”，但我没有收到错误“返回未定义不是对象（评估 this.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>
    );
}

}

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

default page page detalhesJogadores

我想知道我应该如何继续解决这个问题，因为我不知道我要做什么了

【问题讨论】：

根据我的观点，您可以尝试这样：- onPress = { this.details } 和外部渲染定义一个名为 details 的箭头函数，如下所示：- details = ( ) => { this.props。 navigation.navigate( 'Detalhes' ) } 这对我有用。
它对我不起作用，我按照你的要求放了，但是我有同样的错误，我编辑了代码部分，看看我是否做对了，你有另一个建议？
你能把路由页面发给我吗？
删除标题并将其添加到您的屏幕上，即import { StackNavigator } from 'react-navigation';。
用CevaComic说的方法成功了，不过非常感谢兄弟的关注

标签： javascript reactjs react-native navigation react-navigation

【解决方案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
})

【讨论】：