React Native路由器 - 元素类型无效

Question

我正在尝试为我的React Antive应用程序中的不同页面进行路由。因此，我已经使用新路由器创建了一个路由器.js文件：

// @flow
import React, { Component } from 'react';
import View from 'react-native';
import { NativeRouter, Route, Link } from 'react-router-native'
import PropTypes from 'prop-types';
import Splash from './components/Splash';
import Home from './components/Home';
class Router extends Component {
    
    componentWillMount() {
        navigator = this.context.history;
    }
    /**
     * Render
     * @return {XML} JSX
     */
    render() {
        return (
            <View style={{flex: 1}}>
                <Route exact path="/" component={Splash}/>
                <Route exact path="/home" component={Home}/>
            </View>
        );
    }
}
export default Router;

，然后我在飞溅组件中导入了路由器。从那里，我想要一个按钮将用户重定向到主屏幕。

import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { NativeRouter, Route, Link, Switch } from 'react-router-native'
import Home from "./Home";
import Router from "../router";
class Splash extends Component {
    render() {
        return(
            <View style={ styles.container }>
                <Router>
                    <Button onPress={() => navigator.push('/home')}
                            title="Go to home" />
                </Router>
            </View>
        );
    }
}
export default Splash;

但是我会收到以下错误：

Invariant Violation: Element type is invalid expected a string (for built-in components) or a class/function (for composite components) but got: object
Check the render method of 'Router'

这是我第一次使用React Native路由器，而我不起作用。有人知道制作简单路由器以在屏幕之间导航的最佳解决方案吗？

Answer 1

它似乎是您传递的组件。在文档中：

https://github.com/jmurzy/reaeact-router-native

组件只是这样完成的：

const Detail = (props) => (
  <View style={[styles.component, { backgroundColor: '#FFFFFF' }]}>
  {props.children}</View>
);

您似乎正在导入文件并传递对此的引用。尝试按照上述文档进行操作，看看是否解决了。