无法在 ReactNative 中使用 StackNavigator [英] Unable to use StackNavigator in ReactNative

问题描述

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

I'm trying to create a simple navigation in the following page:

第 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 以及:

And in the index page I'm importing Page1, Page2 and Page3 and :

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

除非我注释 const { navigate } = this.props.navigation;，否则该应用程序运行良好.我收到以下错误:

The app works fine unless I comment const { navigate } = this.props.navigation;. I get the following error:

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

Undefined is not an object (evaluating 'this.props.navigation.navigate')

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

不太确定我为什么尝试它，但会弄清楚它是否有效.没有.

Not really sure why I tried it but was going to figure it out if it worked. It did not.

我正在尝试使用 ReactNavigation 而不为其创建减速器，因为我不理解 这部分 即使尝试了 2 天.

I'm trying to use ReactNavigation without creating the reducer for it, cause I did not understand this part even after trying for 2 days.

为什么这里失败了?请帮忙.

Why is this failing here? Please help.

非常感谢.

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

推荐答案

简答.就这样做.

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

Explanation - The reason why this.props.navigation is coming out undefined is that you're essentially using another instance of the Page 1 component inside your Page 3 and not the one that you used to initialize the StackNavigator with. So it's an entirely new Page 1 that is not coupled with the StackNavigator at all. If Page 1 would have been the starting component of your StackNavigator. Then this.props.navigation would not have been undefined which brings me to another point of interest.

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

Why would you ever nest Page 1 inside Page 3 but want the same page as a sibling to Page 3 inside your react navigation stack? The idea is to add components inside our StackNavigator as screens without nesting them together and we move from one screen to another using this.props.navigation.navigate inside any one of them. So, therefore, our Page 3 would have our navigation prop (since I'm assuming it gets loaded first through the StackNavigator directly) we just pass that prop to our nested Page 1 component and viola! You would now have access to this.props.navigation inside your Page 1.

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

Also, since your Page 3 has the <Provider > tag I'm assuming it's something more of a root. In that case, you're better off using <SimpleApp > in place of <Page1 > and keeping Page 1 as the starting point of your Stack. You can then register your root component as AppRegistry.registerComponent('my03', () => Page3);

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

The last piece of info, you can keep your redux state and your navigation completely decoupled from each other so use redux integration only when you're absolutely sure that you need your navigation state inside your redux store. A project which has both Redux and ReactNavigation doesn't mean that you have to integrate them both. They can be completely separate.

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

Phew! Hope it helps! :)

这篇关于无法在 ReactNative 中使用 StackNavigator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！