使用StackNavigation外部渲染訪問傳遞的數據

Question

我可以fetch a ListView並顯示任何列表項的詳細信息頁onPress。我可以在DetailsPage中顯示點擊項目的詳細信息，但僅在render()中顯示。如何訪問渲染之外的任何值？我想使用該值fetch信息，從另一個API

主頁：

import React, { Component } from 'react'; 
import { 
AppRegistry, StyleSheet, ListView, 
Text, TouchableHighlight, View 
} from 'react-native'; 

import { StackNavigator } from 'react-navigation'; 
import DetailsPage from './src/DetailsPage';  

class HomeScreen extends React.Component { 
    static navigationOptions = { 
    title: 'MyApp!', 
    }; 

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

    renderRow(user, sectionID, rowID, highlightRow){ 
      const { navigate } = this.props.navigation; 
     return(

     <TouchableHighlight onPress={() => navigate('DetailsPage', {users: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 }, 
}); 



AppRegistry.registerComponent('NavigationTest',() => NavigationTest); 

詳情頁：

import React, { Component } from 'react'; 
import { StyleSheet, ListView, Text, TouchableHighlight, View } from 'react-native'; 

export default class DetailsPage extends React.Component { 
    static navigationOptions = ({ navigation }) => ({ 
    title: `${navigation.state.params.users.name}`, 

    }); 

    // var userid = 2; --> This doesn't work as it returns Unexpected Token where var is mentioned. 

    constructor() { 
    super(); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.state = { 
     albumDataSource: ds, 
    }; 
    } 

    componentDidMount(){ 
     this.fetchAlbums(); 
    } 

    fetchAlbums(){ 

     var theUser = 2; //This is the value I want to receive from the clicked user. 

     // var newUser = this.props.navigation.state.users.id; -> this doesnt work. 


     fetch('https://jsonplaceholder.typicode.com/albums?userId='+newUser) 
      .then((response) => response.json()) 
      .then((response) => { 
       this.setState({ 
        albumDataSource: this.state.albumDataSource.cloneWithRows(response) 
       }); 
      }); 
    } 


    renderRow(album, sectionID, rowID, highlightRow){ 

     return(

     <TouchableHighlight> 
     <View style={styles.row}> 
     <Text style={styles.rowText}> {album.userId} - {album.title} </Text> 
     </View> 
     </TouchableHighlight> 
    ) 
    } 


    render() { 
    const { params } = this.props.navigation.state; 
    return (
     <View style={styles.container}> 
     <Text style={styles.textstyle}>Screen Chat with {params.users.name}</Text> 
     <Text style={styles.textstyle}>Username : {params.users.username}</Text> 
     <Text style={styles.textstyle}>Email : {params.users.email}</Text> 
     <Text style={styles.textstyle}>ID : {params.users.id}</Text> 

     <ListView 
      dataSource = {this.state.albumDataSource} 
      renderRow = {this.renderRow.bind(this)} 
      /> 
     </View> 
    ); 
    } 
} 

所以我想用users.id獲取更多數據在DetailsPage並顯示該數據。我怎麼做。請幫忙。非常感謝。

Answer 1

這裏我發現，這一下我錯了，

var newUser = this.props.navigation.state.users.id; 

使用，這可能是它可以幫助你

console.log(this.props.naviagtion.state.params) **Check if are getting those value then use below one ** 
var newUser = this.props.navigation.state.params.users.id;