स्टैकनेविगेटर में स्क्रीन पर पैरामीटर कैसे पास करें?

Question

मेरे प्रतिक्रिया मूल निवासी कोड:

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

नेविगेशन config:

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

विवरण स्क्रीन है:

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

मैं कोड के साथ DetailsPage को user पारित करने में सक्षम नहीं कर रहा हूँ :

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

मैं onPress फ़ंक्शन के साथ DetailPage पर नेविगेट करना चाहता हूं। अगर मैं इसे चेतावनी देता हूं:

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

मुझे मूल्य मिलता है, लेकिन मैं इसे दूसरे पृष्ठ पर कैसे पास करूं?

बहुत धन्यवाद!

Answer 1

आप navigate समारोह का दूसरा तर्क के साथ पैरामीटर पारित कर सकते हैं:

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

और फिर उन्हें this.props.navigation.state.params में एक्सेस करते हैं। अपने DetailsPage में उदाहरण के लिए:

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

संदर्भ: https://reactnavigation.org/docs/navigators/navigation-actions#Navigate