无法在 React Native 中使用 Stack Navigator

Question

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

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

在索引页中，我导入了第 1 页、第 2 页和第 3 页，并且：

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 without creating the reducer for it, cause I did not understand this part 即使在尝试了 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);

Answer 1

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

解释 - this.props.navigation 出现未定义的原因是您实际上在 Page 3 中使用了 Page 1 组件的另一个实例，而不是您使用的实例初始化 StackNavigator 。所以它是一个全新的 Page 1，根本没有与 StackNavigator 耦合。如果 Page 1 将是您的 StackNavigator 的起始组件。那么 this.props.navigation 就不会是未定义的，这让我想到了另一个兴趣点。

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

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

最后一条信息，你可以让你的 redux 状态和你的导航完全相互分离，所以只有当你绝对确定你的 redux 存储中需要你的导航状态时才使用 redux 集成。同时具有 Redux 和 ReactNavigation 的项目并不意味着您必须将它们都集成。它们可以完全分开。

呸！希望能帮助到你！ :)

无法在 React Native 中使用 Stack Navigator

Unable to use StackNavigator in ReactNative

reactjs

react-native

react-redux

react-navigation