React-native创建开关导航器

Question

I am a beginner in react-native. I am trying to create a navigator sidebar and i have an error regarding creating the switch navigator. I have followed tutorials but i came up with an error

Require cycle: modules\\Dashboard.js -> modules\\Navigator.js -> modules\\Dashboard.js

I have this in my Navigator.js :

import React, { Component } from 'react'
import { Platform, Dimensions } from 'react-native'
import { createSwitchNavigator, createAppContainer } from 'react-navigation';

//navigators
import Dashboard from '../modules/Dashboard.js'

const WIDTH = Dimensions.get('window').width;

const DrawerConfig = {
    drawerWidth: WIDTH*0.83,
}

const SwitchNavigator = createSwitchNavigator(
    {
        dashboard: {
            screen: Dashboard
        },
    },
    DrawerConfig
);

const AppContainer = createAppContainer(SwitchNavigator);

class Navigator extends Component {

    render() {
        return (
            <AppContainer />
          );
    }
}

and Here is my fullcode from Dashboard.js :

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'

import MenuButton from '../modules/MenuButton.js'
import Navigator from '../modules/Navigator.js'


class Dashboard extends Component {

    render() {
        return (
            <View style={styles.container}>
            <Navigator />
            <MenuButton navigation={this.props.navigation} />
                <Text style={styles.smallBlue}>Dashboard</Text>
            </View>
          );
    }
}

const styles = StyleSheet.create({

//Views
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },

//Text
  smallBlue: {
          marginTop: 30,
          color: 'powderblue',
          fontWeight: 'bold',
          fontSize: 30,
  }
});

export default Dashboard

Is this because i imported already dashboard from my navigator and my dashboard imported my navigator ?

Answer 1

Yes it is import issue as described in this link

You should not use Navigator in your dashboard screen. it should be in your app register component

index.js

import Navigator from "./Navigator";

AppRegistry.registerComponent(appName, () => Navigator);

Navigator.js

import React, { Component } from 'react'
import { Platform, Dimensions } from 'react-native'
import { createSwitchNavigator, createAppContainer } from 'react-navigation';

//navigators
import Dashboard from '../modules/Dashboard.js'

const WIDTH = Dimensions.get('window').width;

const DrawerConfig = {
    drawerWidth: WIDTH*0.83,
}

const SwitchNavigator = createSwitchNavigator(
    {
        dashboard: {
            screen: Dashboard
        },
    },
    DrawerConfig
);

const AppContainer = createAppContainer(SwitchNavigator);

export default class Navigator extends Component {

    render() {
        return (
            <AppContainer />
          );
    }
}

Update For Expo

Update App.js file and add Navigator.js code

import React, { Component } from 'react'
import { Platform, Dimensions } from 'react-native'
import { createSwitchNavigator, createAppContainer } from 'react-navigation';

//navigators
import Dashboard from '../modules/Dashboard.js'

const WIDTH = Dimensions.get('window').width;

const DrawerConfig = {
    drawerWidth: WIDTH*0.83,
}

const SwitchNavigator = createSwitchNavigator(
    {
        dashboard: {
            screen: Dashboard
        },
    },
    DrawerConfig
);

const AppContainer = createAppContainer(SwitchNavigator);

export default class Navigator extends Component {

    render() {
        return (
            <AppContainer />
          );
    }
}