我正在使用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/

10-16 21:20