我正在使用react-native-router-flux软件包进行路由,似乎出了点问题。我看到了其他类似的问题,但是没有一种解决方案适合我。
请帮忙...
这是我的代码:
routes.js
import React from 'react';
import {Router, Stack, Scene} from 'react-native-router-flux';
import Login from './pages/login';
import Signup from './pages/signup';
class Routes extends React.Component {
render(){
return(
<Router>
<Stack key='root' hideNavBar = {true}>
<Scene key = "login" Component={Login} Title="Login" initial={true}/>
<Scene key = "register" Component={Signup} Title="Register" />
</Stack>
</Router>
);
}
}
export default Routes;
App.js
import React from 'react';
import { StyleSheet, View, StatusBar } from 'react-native';
import Routes from './src/routes';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#2f4f4f" barStyle="light-content" />
<Routes />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#70a9a9',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
我是新来的反应本地人,并期待解决方案。
下面列出了我面临的错误:
Error: The component for route 'login' must be a React component. For example:
import MyScreen from './MyScreen';
...
login: MyScreen,
}
You can also use a navigator:
import MyNavigator from './MyNavigator';
...
login: MyNavigator,
}
This error is located at:
in Router (at routes.js:9)
in Routes (at App.js:10)
in RCTView (at View.js:44)
in App (at registerRootComponent.js:17)
in RootErrorBoundary (at registerRootComponent.js:16)
in ExpoRootComponent (at renderApplication.js:34)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in AppContainer (at renderApplication.js:33)
- node_modules/react-navigation/src/routers/validateRouteConfigMap.js:23:12 in <unknown>
- node_modules/react-navigation/src/routers/validateRouteConfigMap.js:15:21 in validateRouteConfigMap
- ... 25 more stack frames from framework internals
最佳答案
在routes.js中的这些行上:<Scene Key = "login" Component={Login} Title="Login" initial={true}/> <Scene Key = "register" Component={Signup} Title="Register" />
您将Key
大写,因此React认为您正在追加一个组件,这就是为什么它会引发错误以导入该组件。
小写key
,它应该可以正常工作。抱歉,我无法发表评论,但是我的代表人数不足。
关于javascript - 路由错误。路线“key1”的组件必须是React组件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53558747/