undefined 不是对象（正在计算 this.props.navigation.navigate）

Question

我是第一次尝试学习 React Native。我试图引入一个 stacknavigator，但行 const {navigate} = this.props.navigation; 导致了错误：

undefined is not an object (evaluating 'this.props.navigation.navigate')

这是我的代码：

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 是空的。

这是我的 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);

Answer 1

两个错误：

你不应该那样调用 AppRegistry 两次。您可以将其从 app.js 文件中删除。
您误解了 react-navigation 的路由器是如何工作的。 StackNavigator（以及 Tab 和 Drawer）是需要直接渲染的组件（例如，您传递给 AppRegistry [A] 的内容）或在您的应用程序 [B].[=29] 中的某个时刻=]

因此，要解决此问题，您需要导出 myscreens 而不是 App。为了说明执行此操作的两种方法：

A. 你可以看到这个 in the docs 的例子，但是因为你把你的代码分成两个文件，所以它看起来像这样：

./components/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. 您将在另一个 class 中渲染 StackNavigator，然后导出渲染它的 class。这更符合你已经在做的事情，并且在长运行中更灵活（例如：如果你在某些时候使用 redux ，你将需要这样做），所以你应该做这样：

./components/app.js - 注意 myscreens 的大小写更改为 MyScreens。这是必需的，因为 React Native 会 as 。直接使用 AppRegistry 不会触发此错误，因为您没有在 JSX 中使用 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);

undefined 不是对象（正在计算 this.props.navigation.navigate）

undefined is not an object (evaluating this.props.navigation.navigate)

javascript

react-native

react-navigation

stack-navigator