2

我正在使用 react-native-router-flux 包进行路由，似乎出了点问题。我见过其他类似的问题，但没有一个解决方案对我有用。

请帮忙...

这是我的代码：-

路由.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;

应用程序.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
4

1 回答 1

1

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

于 2018-11-30T16:14:40.657 回答