Как передать параметры на экран в StackNavigator?

My React Родительский код:

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

Конфигурация навигации:

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

Экран Details:

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

Я не могу передать user в DetailsPage с кодом:

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

Я хочу перейти к DetailPage с помощью функции onPress. Если я предупреждаю об этом как:

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

Я получаю значение, но как передать его на другую страницу?

Большое спасибо!

Ответ 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/params.html

Ответ 2

Вы можете использовать react-navigation-helper чтобы легко получить параметры:

Пример:

import { StackNavigator } from 'react-navigation';
import { StackNavigatorHelper } from 'react-navigation-helper';

import { Scene1, Scene2 } from './src';

export default StackNavigatorHelper.exportStackNavigator(
    StackNavigator(
        {
            Scene1: { screen: StackNavigatorHelper.setInitParamsToProps(Scene1) },
            Scene2: { screen: StackNavigatorHelper.paramsToProps(Scene2) }
        }
    )
);

И получить параметры как:

const parameterName = this.props.parameterName

Ссылка: реагировать-навигация-помощник