Как получить информацию с других страниц в реагировать на родной?

Question

Я начинаю реагировать на родной язык, и мне трудно, я хотел бы взять информацию с другой страницы и показать эти данные на этой новой странице. Например, я создаю приложение для своей работы в колледже, где оно посвящено футболистам, и на нем есть экран, показывающий список этих игроков, но я создаю страницу с более подробной информацией о выбранном игроке.

Ниже приведен код, созданный мной для репликации игроков.

listaIndex. js

/* eslint-disable prettier/prettier */
import {Text, View,StyleSheet,Image} from 'react-native';
import React, {Component} from 'react';

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

Ниже приведен код, который я могу показать игрокам.

index. js

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 Home({navigation}) { 
  function navigateToPlayers(){
    navigation.navigate('Detalhes');
  }
  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"/>
               <TouchableOpacity style={styles.botao} title="Detalhes" onPress={(navigateToPlayers)}>
                  <Text style={styles.textoB}>Detalhes</Text>
                </TouchableOpacity>              
          </ScrollView>
      </ScrollView>
    </View>
    </SafeAreaView>
  );
}

Ниже приведен код, который я не могу создать, чтобы показать данные игрока, на которого нажали detalhesJogadores. js

/* eslint-disable prettier/prettier */
import {Text, View, Image,StyleSheet} from 'react-native';
import React from 'react';



export default function DetalhesPlayers() {  
    return (
      <View style={styles.viewDentro}>
        <View style={styles.viewTop}>
          {/* Player Name */}
          <Text>{this.props.name}</Text> 
          {/* Player Position */}
          <Text style={styles.textoP}>{this.props.posicao}</Text>
          {/* Player Image */}
          <Image source={this.props.imageUri} style={styles.imagem} />
        </View>
      </View>
    );  
}

Мне бы хотелось некоторая помощь, чтобы решить эту проблему, потому что это для моей работы в колледже, и я не знаю, с чего начать

Экран, показывающий игроков Экран, показывающий данные игрока

Answer 1

Вы должны передать параметры навигации на страницу Подробности внутри navigateToPlayer (). Получить параметры на странице сведений и затем отобразить.