我正在尝试在以下页面中创建一个简单的导航：

第1页：

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

在索引页面中，我正在导入 Page1、Page2 和 Page3 以及：

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而不为它创建减速器，因为即使尝试了 2 天后我也不理解这部分。

为什么这在这里失败？请帮忙。

非常感谢。

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