Jak przesłać parametry do ekranu w StackNavigator?

Question

My React natywny kod: config

import React, { Component } from 'react'; 
import { AppRegistry, ActivityIndicator, StyleSheet, ListView, 
    Text, Button, TouchableHighlight, View } from 'react-native'; 

import { StackNavigator } from 'react-navigation'; 
import DetailsPage from './src/screens/DetailsPage'; 

class HomeScreen extends React.Component { 

    constructor() { 
    super(); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     userDataSource: ds, 
    }; 
    } 

    componentDidMount(){ 
     this.fetchUsers(); 
    } 

    fetchUsers(){ 

     fetch('https://jsonplaceholder.typicode.com/users') 
      .then((response) => response.json()) 
      .then((response) => { 
       this.setState({ 
        userDataSource: this.state.userDataSource.cloneWithRows(response) 
       }); 
      }); 
    } 

    onPress(user){ 
     this.props.navigator.push({ 
      id: 'DetailPage' 
     }); 
    } 

    renderRow(user, sectionID, rowID, highlightRow){ 
     return(
     <TouchableHighlight onPress={()=>{this.onPress(user)} } > 
     <View style={styles.row}> 
     <Text style={styles.rowText}> {user.name} </Text> 

     </View> 
     </TouchableHighlight> 
    ) 
    } 


    render(){ 
     return(
      <ListView 
      dataSource = {this.state.userDataSource} 
      renderRow = {this.renderRow.bind(this)} 
      /> 
    ) 
    } 
} 

Nawigacja:

const NavigationTest = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    DetailsPage: { screen: DetailsPage }, 
}); 

szczegóły ekrany jest:

import React, { Component } from 'react'; 
import { StyleSheet, Text, View } from 'react-native'; 

import styles from '../styles'; 


export default class DetailsPage extends React.Component { 
    static navigationOptions = ({ navigation }) => ({ 
    title: `User: ${navigation.state.params.user.name}`, 
    }); 
    render() { 
    const { params } = this.props.navigation.state; 
    return (
     <View> 
     <Text style={styles.myStyle}>Name: {params.name}</Text> 
     <Text style={styles.myStyle}>Email: {params.email}</Text> 
     </View> 
    ); 
    } 
} 

nie jestem w stanie przekazać user do DetailsPage z kodem :

onPress(user){ 
     this.props.navigator.push({ 
      id: 'DetailPage' 
     }); 
    } 

Chcę przejść do DetailPage z funkcją onPress. Jeśli zgłoszę to jako:

onPress(user){ Alert.alert(user.name)} 

Dostaję wartość, ale w jaki sposób przekazać ją na drugą stronę?

Wielkie dzięki!

Answer 1

można przekazać params z drugiego argumentu navigate funkcyjnego:

onPress(user) { 
    this.props.navigation.navigate(
    'DetailPage', 
    { user }, 
); 
} 

A potem do nich dostęp w this.props.navigation.state.params. Na przykład w swojej DetailsPage:

<Text style={styles.myStyle}>{this.props.navigation.state.params.user.name}</Text> 

referencyjny: https://reactnavigation.org/docs/navigators/navigation-actions#Navigate