尝试呈现react导航AppContainer时获得不变冲突

Question

我正在尝试开始使用react-Navigation3.0.9，但是我在渲染Router组件时遇到了问题。

这是我的router/index.js文件

import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';

import Login from '../screens/Login';

const Routes = createStackNavigator({
  Login
});

const Router = createAppContainer(Routes)

export default Router;

这是我的App.js

import React from 'react';
import { Platform, StatusBar, StyleSheet, View, TextInput, Text } from 'react-native';

import { Router } from './router'

export default class App extends React.Component {
  render() {
    return(
      <Router />
    )
  }
}

这是我的screens/Login.js文件

import React from 'react';
import { View, Text } from 'react-native';

export default class Login extends React.Component {
  render() {
    return(
      <View>
        <Text>Hello World</Text>
      </View>
    )
  }
}

我在Expo中收到的错误告诉我元素类型无效(不变冲突)，并告诉我应该检查App的render方法。

我没有正确导入/导出路由器吗？

Answer 1

路由器导入不应被解构

在App.js change中：

import { Router } from './router'

至

import Router from './router'

Answer 2

在router/index.js文件中，更改此部分：

import Login from '../screens/Login';

const Routes = createStackNavigator({
    Login: { screen: Login }    // Just changed this line
});

另外，在you App.js导入Router as：

import Router from './router' 

c/o：'s answer