无法在ReactNative中使用StackNavigator

Question

我试图在下一页中创建一个简单的导航：

Page1：

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;，否则该应用可以正常运行。我收到以下错误：

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

我也尝试过： onPress={() => this.props.navigation.navigate('Page2', { user: 'Lucy' }) }和 onPress={() => navigation.navigate('Page2', { user: 'Lucy' }) }

不确定为什么我尝试了它但是如果它有用的话就会弄清楚它。它没有。

我尝试使用ReactNavigation而不为其创建缩减器，因为即使在尝试了2天后我也无法理解this part。

为什么这会失败？请帮忙。

非常感谢。

UPDATE1

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

Answer 1

简短回答。就这样做吧。 <Page1 navigation={this.props.navigation} />

说明 - this.props.navigation未定义的原因是您实际上在Page 1内使用Page 3组件的另一个实例，而不是您使用的那个使用初始化StackNavigator。所以它是一个全新的Page 1，根本没有与StackNavigator结合。如果Page 1成为StackNavigator的起始组成部分。然后this.props.navigation不会被定义，这会带我到另一个兴趣点。

为什么你会在Page 1中嵌套Page 3，但想要在你的反应导航堆栈中与Page 3的兄弟姐妹相同的页面？我们的想法是在我们的StackNavigator内部添加组件作为屏幕，而不将它们嵌套在一起，我们在其中任何一个内部使用this.props.navigation.navigate从一个屏幕移动到另一个屏幕。因此，我们Page 3将拥有navigation道具（因为我假设它首先通过StackNavigator直接加载）我们只是将该道具传递给我们的嵌套{Page 1 1}}组件和中提琴！您现在可以访问this.props.navigation内的Page 1。

此外，由于您的Page 3有<Provider >标记，因此我假设它更像是根。在这种情况下，您最好使用<SimpleApp >代替<Page1 >，并将Page 1作为Stack的起点。然后，您可以将根组件注册为AppRegistry.registerComponent('my03', () => Page3);

最后一条信息，你可以保持你的redux状态和你的导航完全脱离，所以只有当你完全确定你需要你的redux商店里面的导航状态时才使用redux集成。同时具有Redux和ReactNavigation的项目并不意味着您必须将它们集成在一起。它们可以完全分开。

唷！希望能帮助到你！ ：）