Question

我可以fetch ListView并显示任何列表项的详细信息页面onPress。我可以在DetailsPage中显示所点击项目的详细信息，但仅限于render()。如何访问渲染之外的任何值？我想将该值用于来自其他API的fetch信息

主页：

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;

访问在Stack外部使用StackNavigation传递数据

1 个答案: