React Navigation上出现错误的原因是什么，＆＃39; this.props.navigation＆＃39;未定义

Question

我在实施基本的React Navigation时遇到错误。启动应用程序时会出现此错误，当我注释掉行＆＃39; const {navigate} = this.props.navigation;＆＃39;没有错误。

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);

在我的渲染（）中注释掉＆＃39; this.props.navigation＆＃39;没有错误 我没有看到“欢迎”＃39; 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

我希望我的回答可以帮到你..谢谢。