传递道具的问题



嘿伙计们,

我的代码几乎没有问题。 老实说,我对 React-native 很陌生 现在我真的被这个导航器的东西困住了

我的代码:

组件5.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);

详情.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

然后一切正常。但是详细信息页面是空的,除了返回按钮

我的目的是在详细信息页面上显示选择用户的姓名和电子邮件等属性

错误信息

类型错误:未定义不是对象(计算"_this.props.user.name"(

我的意见

我认为问题出在属性的推送过程中 但现在我在一个我不知道我现在能做什么的地步

感谢您的帮助和时间,我真的很感激

用户对象正在通过导航传递值,所以你应该写

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

相关内容

  • 没有找到相关文章

最新更新