反應導航錯誤的原因是什麼，'this.props.navigation'未定義

Question

我收到並執行基本反應導航時出錯。啓動應用程序時出現此錯誤，當我註釋掉'const {navigate} = this.props.navigation;'行時''沒有錯誤。

App.js代碼

import React from 'react'; 
import {AppRegistry, StyleSheet, Text, View, TextInput, TouchableOpacity, 
Button, KeyboardAvoidingView, ToastAndroid} from 'react-native'; 
import { StackNavigator,} from 'react-navigation'; 

import Home from './myviews/Home'; 

export default class Myapp extends React.Component { 
static navigationOptions = { 
title: 'Welcome', 
}; 
constructor (props) 
{ 
super(props); 
this.state = { 
text : 'Hi there...' 
,username : '' 
,password : ''} 
} 
login =() => { 

} 
render() { 
const { navigate } = this.props.navigation; 
let text = this.state.text; 
return (
    <KeyboardAvoidingView behavior="padding" style = {styles.container}> 
     <View style = {styles.child1}> 

     </View> 
     <View style = {styles.child2}> 
      <Text>{text} </Text> 
      <TextInput onChangeText = {(value)=>this.setState({username:value})} style = {styles.txtBig} placeholder = "username or email"></TextInput> 
      <TextInput onChangeText = {(value)=>this.setState({password:value})} style = {styles.txtBig} placeholder = "password" ></TextInput> 
      <TouchableOpacity style = {styles.button} onPress={()=>{ this.login() }}> 
       <Text style={styles.txt}>Login</Text> 
      </TouchableOpacity> 
      <Button 
       onPress={() => navigate('Home')} 
       title="Go home" 
      /> 
     </View> 
    </KeyboardAvoidingView> 
); 
} 
} 

const App = StackNavigator({ 
Myapp: { screen: Myapp }, 
Home: { screen: Home }, 
}); 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'column', 
    backgroundColor: '#7fffd4', 
    }, 
child1 : { 
flex: 1, 
flexDirection: 'row', 
justifyContent : 'space-around', 
alignItems : 'center', 
backgroundColor: '#00ffff', 
}, 
child2 : { 
flex: 1, 
alignItems : 'center', 
backgroundColor: '#ff8c00', 
}, 
grandchild1 : { 
width:150, 
    height:50, 
    backgroundColor : '#ff8c00', 

}, 
grandchild2 : { 
    width:150, 
    height:50, 
    backgroundColor : '#8fbc8f' 
}, 
txtBig : { 
width : 300, 
marginTop : 10, 
backgroundColor : 'white', 
borderWidth: 3, 
borderColor : 'white', 
paddingHorizontal : 10, 
fontSize : 20, 
color : '#ff8c00', 
height : 50, 
}, 
txt : { 
textAlign : 'center', 
fontSize : 20, 
color : '#ff8c00', 
fontWeight : '700' 
}, 
button : { 
    backgroundColor : '#ffd700', 
    width : 300, 
    height : 50, 
    paddingHorizontal : 10, 
    paddingVertical : 10, 
    marginTop : 10, 
} 
}); 
AppRegistry.registerComponent('Myapp',() => App); 

在我渲染（）如果註釋掉「this.props.navigation」沒有錯誤 ，我沒有看到在「歡迎」稱號對myApp屏幕要麼

Home.js代碼

import React from 'react'; 
    import {AppRegistry, StyleSheet, Text, View, TextInput, TouchableOpacity, 
    KeyboardAvoidingView, ToastAndroid} from 'react-native'; 

    export default class Home extends React.Component { 
constructor (props) 
    { 
    super(props); 
    } 

    render() { 

    return (
    <KeyboardAvoidingView behavior="padding" style = {styles.container}> 
     <View style = {styles.child1}> 
      <Text>Welcome Home</Text> 
     </View> 
    </KeyboardAvoidingView> 
); 

    } 

} 

const styles = StyleSheet.create({ 
container: { 
    flex: 1, 
    flexDirection: 'column', 
    backgroundColor: '#7fffd4', 
}, 
child1 : { 
flex: 1, 
flexDirection: 'row', 
justifyContent : 'space-around', 
alignItems : 'center', 
backgroundColor: '#00ffff', 
    }, 
    }); 
AppRegistry.registerComponent('Home',() => Home); 

Answer 1

在組件上線render()App.js只是改變：

const { navigate } = this.props.navigation;

到

const navigate = this.props.navigation;

我的模擬器，喜歡你的代碼顯示：

編輯＃1：這是更新答案。

我按照react-navigation的官方網站，上面的代碼絕對沒錯。但是，當您導入文件App.js時，可能在文件index.android.js中錯過了某些錯誤。也許你可以只寫在文件index.android.js，如：

import './App';

而且你可以嘗試再次運行你的應用程序。

我在模擬器

，你的代碼顯示，如： App.js

時，我的點擊按鈕，則顯示：

Home.js

我希望我的回答能幫助你..謝謝。