undefined不是对象(评估this.props.navigation.navigate)

时间:2017-09-18 17:01:36

标签: javascript react-native react-navigation stack-navigator

我第一次尝试学习反应原生。我试图引入一个stacknavigator,但行const {navigate} = this.props.navigation;导致错误:

  

undefined不是一个对象(评估   ' this.props.navigation.navigate&#39)

这是我的代码:

import React, { Component } from "react";
import { StackNavigator } from "react-navigation";
import { AppRegistry, Text, View } from "react-native";

export default class App extends Component {
  static navigationOptions = {
    title: "Login",
    headerStyle: {
      backgroundColor: "#000000"
    },
    headerTitleStyle: {
      color: "#fff"
    }
  };

  constructor(props) {
    super(props);
  }
  render() {
    console.log(this.props);

    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello</Text>
      </View>
    );
  }
}

const myscreens = StackNavigator({
  Home: { screen: App }
});
AppRegistry.registerComponent("app", () => myscreens);

我做错了什么以及如何解决这个问题?

我还应该提到在render函数和构造函数中props是空的。

这里是我的package.json,这很重要

{
  "name": "myapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.48.3",
    "react-navigation": "git+https://github.com/react-community/react-navigation.git"
  },
  "devDependencies": {
    "babel-jest": "21.0.2",
    "babel-preset-react-native": "4.0.0",
    "jest": "21.1.0",
    "react-test-renderer": "16.0.0-alpha.12"
  },
  "jest": {
    "preset": "react-native"
  }
}

这是我的index.android.js

import React, { Component } from 'react';
import App from './components/app';
import {
  AppRegistry,
  View
} from 'react-native';

export default class myapp extends Component {
  render() {
    return (
        <App />
    );
  }
}


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

1 个答案:

答案 0 :(得分:2)

两个错误:

  1. 您不应该像这样两次致电AppRegistry。您可以将其从app.js文件中删除。

  2. 您误解了react-navigation路由器的工作原理。 StackNavigator(以及Tab和Drawer)是需要直接呈现的组件(例如,传递给AppRegistry [A]的内容)或应用程序中的某个点[B]。

  3. 因此,要解决此问题,您需要导出myscreens而不是App。为了说明这两种方法:

    A。您可以看到此in the docs的示例,但由于您将代码分解为两个文件,因此它会是这样的:

    <强> ./组件/ app.js

    import React, { Component } from 'react';
    import { StackNavigator } from 'react-navigation';
    import { Text, View } from 'react-native';
    
    class App extends Component {
      static navigationOptions = {
        title: 'Login',
        headerStyle: {
          backgroundColor: '#000000',
        },
        headerTitleStyle: {
          color: '#fff',
        },
      };
    
      constructor(props) {
        super(props);
      }
      render() {
        console.log(this.props);
    
        const { navigate } = this.props.navigation;
        return (
          <View>
            <Text>Hello</Text>
          </View>
        );
      }
    }
    
    const myscreens = StackNavigator({
      Home: { screen: App },
    });
    
    export default myscreens;
    

    <强> index.android.js

    import { AppRegistry } from 'react-native';
    import myscreens from './components/app';
    
    AppRegistry.registerComponent('myapp', () => myscreens);
    

    B。您将在另一个类中呈现StackNavigator,然后导出呈现它的类。这更符合您已经在做的事情,并且从长远来看更灵活(例如:如果您在某些时候使用redux,则需要执行此操作),因此您应该这样做:

    ./ components / app.js - 请注意myscreensMyScreens的大写更改。这是必需的,因为React Native complain about thislowercase JSX tags are considered to be HTML。由于您未在JSX中使用AppRegistry,因此直接使用myscreens不会触发此错误。

    import React, { Component } from 'react';
    import { StackNavigator } from 'react-navigation';
    import { Text, View } from 'react-native';
    
    class App extends Component {
      static navigationOptions = {
        title: 'Login',
        headerStyle: {
          backgroundColor: '#000000',
        },
        headerTitleStyle: {
          color: '#fff',
        },
      };
    
      constructor(props) {
        super(props);
      }
      render() {
        console.log(this.props);
    
        const { navigate } = this.props.navigation;
        return (
          <View>
            <Text>Hello</Text>
          </View>
        );
      }
    }
    
    const MyScreens = StackNavigator({
      Home: { screen: App },
    });
    
    export default MyScreens;
    

    <强> index.android.js

    import React, { Component } from 'react';
    import { AppRegistry } from 'react-native';
    import MyScreens from './components/app';
    
    export default class myapp extends Component {
      render() {
        return <MyScreens />;
      }
    }
    
    AppRegistry.registerComponent('myapp', () => myapp);