我无法理解如何在 react-native 中实现导航。 根据 文档 ，我已安装插件并集成代码，但仍然出现错误

未定义不是对象（评估 this.props.navigation.navigate）

下面是 index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import Login from './src/pages/Login';
import Home from './src/pages/Home';

import { StackNavigator } from 'react-navigation';

export default class ECart extends Component {
  render() {
    return (
      <App />
    );
  }
}

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



const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('ECart', () => ECart);

登录页面

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  Alert,
  Button,
  TouchableOpacity
} from 'react-native';

import { StackNavigator } from 'react-navigation';

import Home from './Home';


export default class Login extends Component {



    constructor(props) {
         super(props);
        this.state = {};
        this.onButtonPress=this.onButtonPress.bind(this);

    }


    onButtonPress= () => {
       alert("ok");
        const { navigate } = this.props.navigation;
        navigate(Home);
        };

    render() {

    return (
        <View style={styles.container}>

                <View style={{justifyContent: 'center',alignItems: 'center',height:250}}>
                    <Image style={{}} source={require('../img/ic_launcher.png')} />
                </View>
              <View style={styles.wrapper}>

                    <View style={styles.inputWrap}>
                        <View style={styles.iconWrap}>
                        <Image style={styles.icon} source={require('../img/icon/ic_email.png')}/>
                        </View>

                        <TextInput
                          style={styles.input}
                          placeholder="Username"
                          underlineColorAndroid="transparent"
                          placeholderTextColor="#939598"
                        />

                    </View>

                    <View style={styles.inputWrap}>

                        <View style={styles.iconWrap}>
                          <Image style={styles.icon} source={require('../img/icon/ic_lock.png')}/>
                        </View>
                        <TextInput
                          style={styles.input}
                          placeholder="Password"
                          secureTextEntry
                          underlineColorAndroid="transparent"
                          placeholderTextColor="#939598"
                        />

                    </View>

                    <TouchableOpacity
                      activeOpacity={0.5}
                      onPress={this.onButtonPress}>
                      <View style={styles.button}>
                          <Text style={styles.buttonText}>Login</Text>
                      </View>
                    </TouchableOpacity>

                    <TouchableOpacity activeOpacity={0.5}>
                      <View style={styles.textWrap}>
                          <Text>Forgot Password.</Text><Text>Reset here</Text>
                      </View>
                    </TouchableOpacity>

              </View>

                <View style={styles.bottomTextWrap}>
                    <Text style={{}}> By clicking Sign In, you agree to our Terms and that you have read our Data Policy, including our Cookie Use.
                    </Text>
                </View>

              <View style={styles.bottomTextWrap}>
               <Text> Copyright  2017 Suyati Technologies
               </Text>
             </View>

        </View>



    );
  }

}

const styles= StyleSheet.create({
  container:{
    flex:1,
    backgroundColor: '#FFFFFF'
  },

  inputWrap:{
    flexDirection:"row",
    marginVertical:10,
    height:50,
    borderWidth:1,
    borderColor:'#939598',
    backgroundColor:'transparent',
  },
  textWrap:{
    flexDirection:"row",
    backgroundColor:'transparent',
    justifyContent:'center',
    alignItems:'center',
    marginVertical:10,
    paddingHorizontal:20
  },
  bottomTextWrap:{
    flex:1,
    flexDirection:"row",
    backgroundColor:'transparent',
    justifyContent: 'center',
    alignItems:'flex-end',
    marginVertical:10
  },
  text:{
    justifyContent:'center',
    alignItems:'center'
  },

  input:{
    flex:1,
    paddingHorizontal:10,
    backgroundColor:"transparent",
    color:'#939598'
  },
  wrapper:{
    paddingHorizontal:30
  },
  iconWrap  :{
    paddingHorizontal:7,
    justifyContent:'center',
    alignItems:'center',
    borderColor:'#939598'
  },
  icon:{
    width:20,
    height:20
  },
  button:{
    backgroundColor:'#13AFBC',
    paddingVertical:10,
    marginVertical:10,
    justifyContent:'center',
    alignItems:'center'
  },
  buttonText:{
    color:'#FFFFFF',
    fontSize:18
  }
})

我正尝试导航到主屏幕。 我发现 react-native 有点难。 如果有人能给我指明正确的方向，那将会非常有帮助，因为我被困住了，需要一种新的方法。

编辑 - 我改变了代码，但它仍然无法导航。我收到了警报，但它仍然在登录页面上

谢谢！