2017-06-14 93 views
-2

我收到错误“未定义不是一个对象('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); 
+0

这是因为道具在firstapp组件中是未定义的。你将不得不重写它的构造函数来访问道具。阅读:https://facebook.github.io/react/docs/react-component.html#constructor –

回答

0

要导出因为没有被传递给它拥有的navigation道具无法访问您的firstapp组件。您需要导出导航组件firstappNav

AppRegistry.registerComponent('firstapp',() => firstappNav); 
0

这是因为道具对象在firstapp组件中是未定义的。你将不得不重写它的构造函数来访问道具。 Read this

相关问题