Question

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

Answer 1

在以下行的routes.js中：
<Scene Key = "login" Component={Login} Title="Login" initial={true}/> <Scene Key = "register" Component={Signup} Title="Register" />
您使用大写的Key，因此React认为您正在追加一个组件，这就是为什么它会引发错误以导入该组件。小写key，它应该可以正常工作。抱歉，我无法发表评论，但我的代表人数不足。

路由错误。路线“ key1”的组件必须是React组件

1 个答案: