無法讀取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