了解“未定义不是对象('this.props.navigation.navigate)”
问题描述:
我收到错误“未定义不是一个对象('this.props.navigation.navigate)”“当我点击标题为“与Lucy聊天”应该带我进入ChatScreen屏幕。了解“未定义不是对象('this.props.navigation.navigate)”
所有这些代码都在我正在使用的App.js文件中,并且正在导出到android和ios文件中。
为什么我得到这个错误的任何原因?谢谢!
import React, { Component } from 'react';
import { StackNavigator } from 'react-navigation';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
Button
} from 'react-native';
export default class firstapp extends Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image source={require('./Packit_title.png')} />
<TextInput
style={styles.account}
/>
<TextInput
style={styles.account}
/>
<View style={styles.button}>
<Button
title="Login"
color="#c47735"
/>
<Button
title="Sign Up"
color="#c47735"
/>
</View>
<Button
onPress={() => navigate('Chat')}
title="Chat with Lucy"
/>
</View>
);
}
}
class ChatScreen extends Component {
static navigationOptions = {
title: 'Chat with Lucy',
};
render() {
return (
<View>
<Text>Chat with Lucy</Text>
</View>
);
}
}
const firstappNav = StackNavigator({
Home: { screen: firstapp },
Chat: { screen: ChatScreen },
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f49542',
},
account: {
backgroundColor: '#ffffff',
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginBottom: 10,
width: 200
},
button: {
flexDirection: 'row',
}
});
AppRegistry.registerComponent('firstapp',() => firstapp);
答
要导出因为没有被传递给它拥有的navigation
道具无法访问您的firstapp
组件。您需要导出导航组件firstappNav
。
AppRegistry.registerComponent('firstapp',() => firstappNav);
这是因为道具在firstapp组件中是未定义的。你将不得不重写它的构造函数来访问道具。阅读:https://facebook.github.io/react/docs/react-component.html#constructor –