2017-06-14 70 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

相關問題