我正在尝试为我的 React Native 应用程序中的不同页面创建路由。因此,我使用新的 Router 创建了一个 router.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;
然后我将路由器导入到我的 Splash 组件中。从那里我想要一个按钮将用户重定向到主屏幕。
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 Router,但无法正常工作。有人知道制作一个简单的路由器在屏幕之间导航的最佳解决方案吗?
最佳答案
这似乎是您传入的组件。在文档中:
https://github.com/jmurzy/react-router-native
组件是这样完成的:
const Detail = (props) => (
<View style={[styles.component, { backgroundColor: '#FFFFFF' }]}>
{props.children}</View>
);
您似乎正在导入一个文件并传递对该文件的引用。尝试按照上面的文档进行操作,看看是否可以解决该问题。
关于javascript - React Native Router - 元素类型无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47635123/