React-native 创建切换导航器

Question

我是 react-native 的初学者。我正在尝试创建导航器侧边栏，但在创建切换导航器时出现错误。我已按照教程进行操作，但遇到了错误

需要循环：modules\Dashboard.js -> modules\Navigator.js -> modules\Dashboard.js

我的 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 />
          );
    }
}

这是我来自 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

这是因为我已经从我的导航器导入了仪表板，而我的仪表板导入了我的导航器？

Answer 1

是的，这是link 中描述的导入问题

您不应在仪表板屏幕中使用 Navigator。它应该在您的应用注册组件中

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 />
          );
    }
}

世博会更新

更新 App.js 文件并添加 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 />
          );
    }
}