无法在ReactNative中使用StackNavigator

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

import { StackNavigator } from 'react-navigation';
import { connect } from 'react-redux';

var styles = require('./styles');


class Page1 extends Component {
  static navigationOptions = {
    header: null
  };

componentDidMount() {      // <== Edited
   setTimeout(function() { 
    const { navigate } = this.props.navigation;
    },4000);
 }
  render() {

      const { navigate } = this.props.navigation;  // <= Getting error here

      const { fname, lname } = this.props.person;

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          From Page 1 - {lname} { fname}
        </Text>
        <TouchableOpacity
          // onPress={() => this.props.navigation.navigate('Page2', { user: 'Lucy' }) }
        >
        <Text style={styles.welcome}> click for Page 2</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

function mapStateToProps(state) {
  return {
    person:state.person
  }
}


export default connect(mapStateToProps) (Page1);

第3页:

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

import Page1 from './Page1'

import { Provider, connect } from 'react-redux'
import configureStore from './store'

const store = configureStore()

export default class Page3 extends Component {
  render() {
    return (
      <Provider store={store}>
        <Page1 /> 
      </Provider>     
    );
  }
}

const SimpleApp = StackNavigator({
  Page1: { screen: Page1 },
  Page2: { screen: Page2 },
  Page3: { screen: Page3 },
});
AppRegistry.registerComponent('my03', () => SimpleApp);

除非我发表评论,否则应用程序运行良好 const { navigate } = this.props.navigation; . 我得到以下错误:

未定义不是对象(评估“this.props.navigation.navigate”)

onPress={() => this.props.navigation.navigate('Page2', { user: 'Lucy' }) } 和 onPress={() => navigation.navigate('Page2', { user: 'Lucy' }) }

我正在尝试使用 ReactNavigation 没有为它创建减速器,因为我不理解 this part

非常感谢。

更新1

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

import { StackNavigator } from 'react-navigation';

import Page1 from './src/components/Page1'
import Page2 from './src/components/Page2'
import Page3 from './src/components/Page3'

const SimpleApp = StackNavigator({
  Page3: { screen: Page3 },
  Page2: { screen: Page2 },
  Page1: { screen: Page1 },
});

AppRegistry.registerComponent('my03', () => SimpleApp);