react native - react - ¿Cómo pasar los parámetros a la pantalla en StackNavigator?

react navigation pass props

Question

Mi código nativo 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)}
/>
)
}
}

Configuración de navegación:

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

Las pantallas de detalles son:

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

No puedo pasar el user a la página de detalles con el código:

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

Quiero navegar a la página de DetailPage con la función onPress . Si lo alerta como:

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

Obtengo el valor, pero ¿cómo lo paso a la otra página?

¡Muchas gracias!

Answer 1

Puedes pasar params con el segundo argumento de la función de navigate :

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

Y luego acceda a ellos en this.props.navigation.state.params . Por ejemplo en su página de detalles:

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

Referencia: reactnavigation.org/docs/params.html