反应导航错误的原因是什么，'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

我希望我的回答能帮助你..谢谢。