How to switch from one page to another in React Native

Question

Eae guys, I’m starting in React Native, and I’m developing an App, for my TCC, this app is about Soccer Players, and it has a screen that appears a list of these players, and I put a button "Details" that when clicking I would like it to go to another page called detailsJourers, I tried to put onPress to redirect but I could not, I would like a help to be able to solve this problem

import {Text, View,StyleSheet,Image, TouchableOpacity} from 'react-native';
import React, {Component} from 'react';
import Detalhes from '../jogadores/detalhesJogadores';



export default class JogadoresLista extends Component {
  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={(Detalhes)}>
                  <Text style={styles.textoB}>Detalhes</Text>
                </TouchableOpacity>
            </View>
        </View>
      </View>
    );  
}
}

I put the photo so I could show it in a better way

Answer 1

Felipe, for navigation use lib

React-navigation V4

So that you can navigate between screens, after configuring the routes take from within this.props the navigation property and use:

navigation.navigate('Rota', {parametros})