Получение инвариантного нарушения при попытке рендеринга реагирующей навигации AppContainer

Question

Я пытаюсь начать работу с response-navigation 3.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>
    )
  }
}

Ошибка, которую я получаю в Экспо, говорит мне, что тип элемента недействителен (нарушение инварианта),и говорит, что я должен проверить метод рендеринга приложения.

Не правильно ли я импортирую / экспортирую Маршрутизатор?

Answer 1

Импорт маршрутизатора не должен быть деструктурирован

В App.js изменилось:

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

---

Также в вас App.js import Routeras:

import Router from './router' 

c / o: jermainecraig ответ