Question

我是本机反应的初学者。我正在尝试创建导航器侧栏，并且在创建开关导航器时出现错误。我已按照教程进行操作，但出现错误

需要周期：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 />
          );
    }
}

React-native创建开关导航器

1 个答案: