开发者问题收集

无法读取未定义的属性“navigate”-React Native Navigation

2017-09-21
2302

我目前正在开发一个与 React Native 配合使用的应用程序,我尝试使用 react-navigation 按照 教程制作流程,但是在运行项目时遇到了麻烦,我做了很多研究,但就是找不到解决方案,首先我使用的是 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个回答

您应该将代码 onPress={() => navigation('Map') 更改为 onPress={() => navigation('ScreenMap') ,并且 ScreenHome 应为第一个屏幕,然后是 ScreenMap ,因为您想从 App 导航到 MapMarker 。或者您可以在 stacknavigator 中设置 initialRouteName: ScreenHome

Md Isfar Uddin
2017-09-22

您创建了 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 组件将在其 props 中进行导航。请注意,您不会“传递”导航 prop。这是为您处理的。

pwcremin
2017-09-23