Question

我正在尝试使用反应导航3.0.9，但是在渲染路由器组件时遇到了问题。

这是我的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中收到的错误告诉我Element类型无效（不变式违反），并说我应该检查App的渲染方法。

我不能正确导入/导出路由器吗？

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 中将Router导入为：

import Router from './router'

c / o： jermainecraig的答案

尝试呈现反应导航AppContainer时遇到固定冲突

2 个答案: