无法读取undefined的属性'navigate' - React Native Navigation

[英]Cannot read property 'navigate' of undefined - React Native Navigation


I am currently working on a app which works with react native and I tried to make a flow using react-navigation working on this tutorial but I am having trouble at the point of running my project, I've done a lot of research and i just cant get to the solution, first for all I am using react-native-cli: 2.0.1 and react-native: 0.48.3, this is my code:

我目前正在开发一个与本机做反应的应用程序,我尝试使用反应导航在本教程中制作流程,但是我在运行项目时遇到了麻烦,我已经做了很多研究而且我只是无法达到解决方案,首先是我使用react-native-cli:2.0.1和react-native:0.48.3,这是我的代码:

App.js:

App.js:

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

class App extends Component {
    static navigationOptions = {
        title: 'Welcome',
    };

    render() {
        console.log(this.props.navigation);
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text>Go to maps!</Text>
                <Button
                    onPress={() => navigate('Map')}
                    title="MAP"
                />
            </View>
        );
    }
}

export default App;

my Router.js

我的Router.js

import {
    StackNavigator,
  } from 'react-navigation';

  import MapMarker from './MapMarker';
  import App from './App';

  export const UserStack = StackNavigator({
    ScreenMap: 
    {
        screen: MapMarker,
        navigationOptions:
        {
            title: "Map",
            header:null
        },
    },
    ScreenHome: 
    {
        screen: App,
        navigationOptions:
        {
            title: "Home",
            headerLeft:null
        },
    },
});

As you can see this is a pretty basic App which i just cant make work, this is a screenshot of my error on the simulator:

正如你所看到的,这是一个非常基本的应用程序,我只是无法工作,这是我在模拟器上的错误的屏幕截图:

Whoops

I would really really appreciate if you guys could help me with this. Thanks.

如果你们能帮助我,我真的很感激。谢谢。

2 个解决方案

#1


1  

You should change the code onPress={() => navigate('Map')} to onPress={() => navigate('ScreenMap')} and "ScreenHome" should be the first screen then "ScreenMap" as you want to navigate from "App" to "MapMarker". Or you can set initialRouteName: "ScreenHome" in the stacknavigator.

您应该将代码onPress = {()=> navigate('Map')}更改为onPress = {()=> navigate('ScreenMap')}和“ScreenHome”应该是第一个屏幕,然后是“ScreenMap”,如您所愿从“App”导航到“MapMarker”。或者您可以在stacknavigator中设置initialRouteName:“ScreenHome”。

#2


0  

You create your StackNavigator, but where do you use it? You should have something like

您创建了StackNavigator,但是在哪里使用它?你应该有类似的东西

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

    import {
        StackNavigator,
      } from 'react-navigation';

    export default class MyApp extends Component {
      render() {
        return (
          <View style={{flex:1}}>
            <StackNavigator/>
          </View>
        );
      }
    }

    AppRegistry.registerComponent('MyApp', () => MyApp);

Now that your StackNavigator is controlling what is shown, your App component will have navigation in its props. Note, you do not "pass" the navigation prop. This is handled for you.

现在您的StackNavigator正在控制所显示的内容,您的App组件将在其道具中导航。注意,你没有“通过”导航道具。这是为您处理的。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2017/09/21/f70154bf8e59dc1304a1341d7abaf30b.html



 
  © 2014-2022 ITdaan.com