Làm thế nào để vượt qua các tham số để sàng lọc trong StackNavigator?

Question

My Phản ứng đang Quê quán:

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

Navigation config:

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

Màn hình chi tiết là:

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

Tôi không thể vượt qua user đến DetailsPage với mã :

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

Tôi muốn điều hướng đến DetailPage với chức năng onPress. Nếu tôi cảnh báo nó như:

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

Tôi nhận được giá trị, nhưng làm thế nào để chuyển nó sang trang khác?

Rất cám ơn!

Answer 1

Bạn có thể vượt qua params với lập luận thứ hai navigate chức năng của:

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

Và sau đó truy cập chúng trong this.props.navigation.state.params. Ví dụ trong DetailsPage của bạn:

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

tham khảo: https://reactnavigation.org/docs/navigators/navigation-actions#Navigate