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

时间:2017-09-21 21:01:22

标签: javascript android ios react-native react-navigation

我目前正在开发一个与本机做反应的应用程序,我尝试使用 react-navigation 处理this教程,但是我遇到了麻烦。运行我的项目,我做了很多研究,我只是无法达到解决方案,首先是我使用 react-native-cli:2.0.1和react-native:0.48.3 ,这是我的代码:

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;

我的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
        },
    },
});

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

Whoops

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

2 个答案:

答案 0 :(得分:1)

您应该更改代码onPress = {()=&gt;导航(&#39;地图&#39;)}到onPress = {()=&gt;导航(&#39; ScreenMap&#39;)}和&#34; ScreenHome&#34;应该是第一个屏幕&#34; ScreenMap&#34;因为你想从&#34; App&#34;到#34; MapMarker&#34;。或者你可以设置initialRouteName:&#34; ScreenHome&#34;在stacknavigator中。

答案 1 :(得分:0)

您创建了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);

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