“路由‘主屏幕’应该声明一个屏幕”出现在我的一个组件上,我不知道为什么

我一直在尝试对我的项目实施react导航,但收效甚微。

我试着只将屏幕加载到顶层,它似乎可以工作,但当我将其放在导航中时,它返回到未定义状态。

这是我的密码:

索引.js:

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

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

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',
        },
    },
});

我已经尝试了很多事情,试图让它工作,包括使该项目再次在一个新的位置。

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

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

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

// 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