"undefined is not an object (evaluating 'Component.router')" 当 运行 样板反应导航应用程序时

Question

我是 react-native 的新手，想尝试一下 react-navigation。 但是当我尝试 运行 一个基本的应用程序时，它给我“undefined is not an object(evaluating 'Component.router)' error. Please help

这是错误的屏幕截图 https://i.gyazo.com/fa89defeff8bef894f509f1511f9b1ae.png

这是我在默认项目中唯一改变的地方，除了安装 反应导航和反应本机手势处理程序

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {createAppContainer,
        createSwitchNavigator,
        createStackNavigator} from 'react-navigation';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return <AppNavigator/>;
  }
}

class MainScreen extends Component{
  render(){
    return <Text>Hi</Text>
  }
}

const AppNavigator = createAppContainer(SwitchNavigator);

const SwitchNavigator = createSwitchNavigator({
  MainScreen : MainScreen,

});```

Answer 1

在您的代码中，您正在访问 SwitchNavigator 之前它的声明。

let 和 const 变量只能在 声明之后访问。

示例：

console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
const a = 10;

来源：MDN docs

也就是说，您的代码应该是：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import {createAppContainer,
        createSwitchNavigator,
        createStackNavigator} from 'react-navigation';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return <AppNavigator/>;
  }
}

class MainScreen extends Component{
  render(){
    return <Text>Hi</Text>
  }
}

const SwitchNavigator = createSwitchNavigator({
  MainScreen : MainScreen,
});

const AppNavigator = createAppContainer(SwitchNavigator);

Answer 2

似乎没问题，只是你忘了导入 MainScreen

import { MainScreen } from '..pathname'

Answer 3

您的代码中有两个问题

(1) 您正试图在 SwitchNavigator 声明之前访问它。 (2) 你在做MainScreen : MainScreen，会报错

const SwitchNavigator = createSwitchNavigator({
  MainScreen,
});

或

// optionally pass an object to your route, with screen, navigation options
const SwitchNavigator = createSwitchNavigator({
  MainScreen: { screen: MainScreen },
});

const AppNavigator = createAppContainer(SwitchNavigator);