I'm trying to implement in my app, that when I click on "Details", it goes to the "detalhesJogadores", but I'm not getting the error "returning undefined is not an object (evaluating 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
I would like a help on how I should proceed in order to solve this problem because I don't know what I do anymore
I made your version without a class. This shoud work with the hook useNavigation.
This works fine for 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
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.