title: How to Pass Parameters to screen in StackNavigator?
body: <p>My React Native code: </p>
  
  <pre><code>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) =&gt; r1 !== r2});
      this.state = {
        userDataSource: ds,
      };
    }
  
    componentDidMount(){
        this.fetchUsers();
    }
  
      fetchUsers(){
  
          fetch('https://jsonplaceholder.typicode.com/users')
              .then((response) =&gt; response.json())
              .then((response) =&gt; {
                  this.setState({
                      userDataSource: this.state.userDataSource.cloneWithRows(response)
                  });
              });
      }
  
      onPress(user){
          this.props.navigator.push({
              id: 'DetailPage'
          });
      }
  
    renderRow(user, sectionID, rowID, highlightRow){
        return(
        &lt;TouchableHighlight onPress={()=&gt;{this.onPress(user)} } &gt;
        &lt;View style={styles.row}&gt;
          &lt;Text style={styles.rowText}&gt; {user.name} &lt;/Text&gt;
  
        &lt;/View&gt;
        &lt;/TouchableHighlight&gt;
        )
    }
  
  
    render(){
        return(
            &lt;ListView
              dataSource = {this.state.userDataSource}
              renderRow = {this.renderRow.bind(this)}
            /&gt;
        )
    } 
  }
  </code></pre>
  
  <p>Navigation config: </p>
  
  <pre><code>const NavigationTest = StackNavigator({
    Home: { screen: HomeScreen },
    DetailsPage: { screen: DetailsPage },
  });
  </code></pre>
  
  <p>The Details screens is: </p>
  
  <pre><code>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 }) =&gt; ({
      title: `User: ${navigation.state.params.user.name}`,
    });
    render() {
      const { params } = this.props.navigation.state;
      return (
        &lt;View&gt;
          &lt;Text style={styles.myStyle}&gt;Name: {params.name}&lt;/Text&gt;
          &lt;Text style={styles.myStyle}&gt;Email: {params.email}&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>I am not able to pass the <code>user</code> to the <code>DetailsPage</code> with the code: </p>
  
  <pre><code>onPress(user){
          this.props.navigator.push({
              id: 'DetailPage'
          });
      }
  </code></pre>
  
  <p>I want to navigate to the <code>DetailPage</code> with the <code>onPress</code> function. If I alert it like: </p>
  
  <pre><code>onPress(user){ Alert.alert(user.name)}
  </code></pre>
  
  <p>I do get the value, but how do I pass it to the other page?</p>
  
  <p>Many thanks!</p>