javascript - "Route ' HomeScreen ' should declare a screen"发生在我的一个组件上，我不知道为什么

Question

我一直在尝试在我的项目中实现 react 导航，但收效甚微。

每次我将屏幕导入导航器时，它都会显示为“未定义”。

我尝试仅将屏幕加载到顶层，它似乎可以工作，但是当我将其放入导航中时，它又恢复为未定义。

这是我的代码:

index.js:

import React, { Component } from 'react';
import Root from './navigator/router';
//import Home from './screens/Home';

export class App extends Component {
render() {
    return <Root />;
    }
}

Home.js

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Slider,
Image,
ListView,
ScrollView,
TouchableOpacity
} from 'react-native';
import HeatingSliderComponent from '../components/HeatingSliderComponent';

export default class Home extends Component {

_onPressDial = () => {
this.props.navigation.navigate('DialScreen');
};

render() {
return (

  <View style={styles.container}>

    {/* Navigation bar */}
    <View style={styles.navBarOuter}>
      <View style={styles.navBarInner}>

        {/* item 1 */}
        <TouchableOpacity flex = {1}>
          <Image 
            //style={styles.button}
            source={require('../../images/menu_logout.png')}
          />
        </TouchableOpacity>

        {/* item 2 */}
        <Image
          flex = {3}
          style = {{resizeMode: 'contain'}}
          source={require('../../images/background_text.png')}
        />

        {/* item 3 */}
        <TouchableOpacity flex = {1}>
          <Image 
            //style={styles.button}
            source={require('../../images/menu_about.png')}
          />
        </TouchableOpacity>
      </View>
    </View>

    <View style = {styles.oneFlexGap}/>

    {/* Main Dial Button */}
    <View style={styles.dialButton}>
      <TouchableOpacity onPress={this._onPressDial}> 
        <Image
        //figure out how to make this work and maybe look into making a custom wheel of some kind.
        //probably by writing in native android
          style={styles.button}
          source={require('../../images/menu_edit_4.png')}
        />
      </TouchableOpacity>
    </View>

    {/*<View style = {styles.oneFlexGap}/>*/}

    {/* Vertical Slider */}
    {/*<View style = {styles.vertSliderContainer}>
      <HeatingSliderComponent
        step={1}
        minimumValue={0}
        maximumValue={100}
        value={0}
      />
    </View>*/}
  </View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 5,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
navBarInner: {
flex: 1,
flexDirection: 'row',
height: '5%',
width: '100%',
alignItems: 'center',
},
navBarOuter: {
flex: 2,
alignItems: 'center',
},
vertSliderContainer: {
flex: 2,
alignItems: 'center',
},
dialButton: {
flex: 2,
alignItems: 'center',
},
button: {
flex: 1
},
oneFlexGap: {
flex: 1
},
});


AppRegistry.registerComponent('Home', () => Home);

路由器.js:

import React from 'react';
import { StackNavigator } from 'react-navigation';

import DialScreen from '../screens/DialScreen';
import Home from '../screens/Home';

export const Root = StackNavigator({
    HomeScreen: {
        screen: Home,
    },
    DialScreen: {
        screen: DialScreen,
        navigationOptions: {
            title: 'DialScreen',
        },
    },
});

我尝试了很多方法来让它发挥作用，包括在新位置再次制作该项目。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~

更新:~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~

我仍然面临这些错误，但现在我面临错误“路由‘HomeScreen’应该声明屏幕错误。

通过我的最后一次更改，我对 router.js 进行了此操作

// import DialScreen from '../screens/DialScreen';
// import Home from '../screens/Home';

var DialScreen = require('../screens/DialScreen');
var Home = require('../screens/Home');

然后像这样构造对象

DialScreen: {
        screen: DialScreen.DialScreen,
        navigationOptions: {
            title: 'DialScreen',
        },

从这些更改中我似乎得到了这个错误。

Route 'DialScreen' should declare a screen. For example:

import MyScreen from './MyScreen';
...
DialScreen: {
screen: MyScreen,
}
<unknown>
    C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\routers\validateRouteConfigMap.js:22:6
validateRouteConfigMap
    C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\routers\validateRouteConfigMap.js:18:21
default
    C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\routers\StackRouter.js:36:25
default
    C:\Users\Dell\Documents\DSMReact\node_modules\react-navigation\src\navigators\StackNavigator.js:44:29
loadModuleImplementation
    C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:174:12
guardedLoadModule
    C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:119:45
_require
    C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:110:24
_accept
    C:\Users\Dell\Documents\DSMReact\node_modules\react-native\packager\src\Resolver\polyfills\require.js:274:12
<unknown>
    C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\Utilities\HMRClient.js:121:27
onmessage
    C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\Utilities\HMRClient.js:101:26
dispatchEvent
    C:\Users\Dell\Documents\DSMReact\node_modules\event-target-shim\lib\event-target.js:172:43
<unknown>
    C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\WebSocket\WebSocket.js:148:27
emit
    C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\EventEmitter\EventEmitter.js:182:12
__callFunction
    C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:245:47
<unknown>
    C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:101:26
__guard
    C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:213:6
callFunctionReturnFlushedQueue
    C:\Users\Dell\Documents\DSMReact\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:100:17

error message

Answer 1

在 index.js 文件中对此进行更改

从“./navigator/router”导入根目录；

到

从 './navigator/router' 导入 { Root };

这是因为您正在 Root StackNavigator 上执行命名导出。

------------------------------------------ 或 ---------------- ---------------

您可以将 router.js 文件中 Root 的导出更改为默认导出，而不是之前的解决方案

const Root = StackNavigator({...});

在底部放置默认导出语句

导出默认根；

干杯!