传递道具的问题

Question

嘿伙计们，

我的代码没什么问题。说实话，我对React-native很新 现在我真的陷入了这个导航器的事情

我的代码：

Component5.js：

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

import OtherScreen from './OtherScreen';

export default class Component5 extends Component{
  static navigationOptions = {
  title: 'Welcome to the app!',
};


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.navigation.navigate(
      'Details',
      {user: user}
    )};



renderRow(user, sectionId, rowId, highlightRow){
    return(
        <TouchableHighlight onPress={() => {this.onPress(user)}}>
        <View style={styles.row}>
            <Text style={styles.rowText}>{user.name}: {user.email}</Text>
        </View>
        </TouchableHighlight>
    )
}



    render(){
        return(
          <View style={styles.container}>
            <Button title="Show me more of the app" onPress={this._showMoreApp} />
            <Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
            <ListView
                dataSource={this.state.userDataSource}
                renderRow={this.renderRow.bind(this)}
            />
          </View>
        );
    }
    _showMoreApp = () => {
      this.props.navigation.navigate('OtherScreen');
    };

    _signOutAsync =  () => {
      this.props.navigation.navigate('Login');
    };
}

const styles = StyleSheet.create({
    row: {
        flexDirection:'row',
        justifyContent:'center',
        padding:10,
        backgroundColor: '#f4f4f4',
        marginBottom:3
    },
    rowText: {
        flex:1
    }
});

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

Details.js

import React, {Component} from 'react';
import {AppRegistry, Text, View, Button} from 'react-native';

export default class Details extends Component{
    constructor(user){
        super(user);
        this.state = {
            name: this.props.user.name,
            email: this.props.user.email
        }
    }

      onPress(){
        this.props.navigation.navigate('Home')
      };


    render(){
        return(
        <View>
          <Text>{this.state.name}</Text>
          <Text>{this.state.email}</Text>
            <Button
                onPress={this.onPress.bind(this)}
                title="Go Back"
            />
        </View>
        );
    }
}


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

问题：

如果我引用

      name: this.props.user.name ,
      email: this.props.user.email

然后一切正常。但除了返回按钮

之外，detailspage是空的

我的目的是在详情页面上显示selectetd用户的名称和电子邮件等属性

错误消息

TypeError：undefined不是Object（评估＆＃39; _this.props.user.name＆＃39;）

我的意见

我认为问题在于物业的推动过程中存在的问题 但现在即时通讯我不知道我现在能做什么

感谢您的帮助和时间，我真的认为它

Answer 1

用户对象通过导航传递值，因此您应该编写

this.props.navigation.state.params.user.name