代码之家 › 专栏 › 技术社区 › learningtech

未定义不是对象(评估此。道具。导航。导航)

stack-navigator react-navigation react-native javascript

1

learningtech · 技术社区 · 8 年前

const {navigate} = this.props.navigation; 导致错误的原因:

undefined不是对象(评估)

这是我的代码:

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);

我还应该提到,props在渲染函数和构造函数中为空。

这是我的包裹。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"
  }
}

这是我的索引。安卓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 回复 | 直到 8 年前

1

2

Michael Cheng 8 年前

两个错误:

你不应该打电话 AppRegistry app.js
你是怎么误解的 react-navigation StackNavigator (以及Tab和Drawer)是需要直接渲染的组件(例如,您传递给的内容) [A] )或在应用程序中的某个时刻[B]。

所以要解决这个问题,您需要导出 myscreens App . 为了说明这两种方法:

A. in the docs ,但由于您将代码分解为两个文件,因此它看起来是这样的:

./组件/应用程序。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;

指数安卓js公司

import { AppRegistry } from 'react-native';
import myscreens from './components/app';

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

您将渲染 堆栈导航器 然后导出呈现它的类。这更符合您已经在做的事情,从长远来看更灵活(例如:如果您使用 redux

./组件/应用程序。js公司 myscreens公司 MyScreens complain about this 像 lowercase JSX tags are considered to be HTML . 使用 myscreens公司 在JSX中。

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;

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);