如何在本机添加抽屉? [英] How to add drawer in react native?

问题描述

你好，我有一个简单的应用程序，我想向他添加一个抽屉，我使用react-navigation 4x并使用 react-navigation-drawer 在我的应用程序中实现Drawer我在一个单独的抽屉里使用过它之前，它工作得很好但是当我使用新软件包时，出现此错误

Hello I have a simple app and i want to add a drawer to him I use react-navigation 4x and use react-navigation-drawer to implement Drawer in my app I used it before sperate drawer in a single package and it's worked fine but when I use the new package I got this error

不变违反:不变违反:元素类型无效:预期的字符串(用于内置组件)或类/函数(用于复合组件)，但得到:未定义.您可能忘记了出口您的组件来自其定义所在的文件，否则您可能已经混入了设置默认导入并命名导入.

Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

尽管我导出了屏幕

这是代码

**navigator.js**

    import React from 'react';
    import {TouchableOpacity, View} from 'react-native';
    import Icon from 'react-native-vector-icons';
    import {createAppContainer, createSwitchNavigator} from 'react-navigation';
    import {
      createDrawerNavigator,
      NavigationDrawerStructure,
    } from 'react-navigation-drawer';
    import {createStackNavigator} from 'react-navigation-stack';
    import ForgetPassword from '../screens/ForgetPassword';
    import Home from '../screens/Home';
    import Splash from '../screens/Splash';

    const AuthStackNavigator = createStackNavigator({
      Authloading: {
        screen: Splash,
        navigationOptions: {
          header: null,
        },
      },
    });

    const HomeStack = createStackNavigator({
      HomeScreen: {
        screen: Home,
        navigationOptions: ({navigation}) => ({
          title: 'Home',
          headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
          headerRight: (
            <TouchableOpacity
              onPress={() => navigation.navigate('Notifications')}
              style={{margin: 10}}>
              <Icon name="ios-notifications" size={28} color="#1DA1F2" />
            </TouchableOpacity>
          ),
        }),
      },
    });

    const DrawerNavigator = createDrawerNavigator({
      HomeDrawer: {
        screen: HomeStack,
        navigationOptions: {
          drawerLabel: 'Home',
          drawerIcon: () => <Icon name="ios-home" size={28} color="#0496FF" />,
        },
      },
    });

    const Navigations = createSwitchNavigator({
      // Authloading: Splash,
      Auth: AuthStackNavigator, // the Auth stack
      App: DrawerNavigator, // the App stack,
    });

    const Navigator = createAppContainer(Navigations);

    export default Navigator;


**Home.js**

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

    // create a component
    class Home extends Component {
      render() {
        return (
          <View style={styles.container}>
            <Text>Home</Text>
          </View>
        );
      }
    }


    //make this component available to the app
    export default Home;


**App.js**

    import React, {Component} from 'react';
    import Navigator from './src/navigations/navigator';
    class App extends Component {
      render() {
        return <Navigator />;
      }
    }

    export default App;

编辑

我只是认为NavigationDrawerStructure是从react-native-drawer导出的，所以这是我的缺点:)

Edit

i just think NavigationDrawerStructure it's exports from react-native-drawer so that's my bad :)

因此这是 NavigationDrawerStructure

//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component {
  //Structure for the navigatin Drawer
  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity onPress={this.toggleDrawer}>
          <Icon
            name="ios-menu"
            size={40}
            style={{margin: 10}}
            color="#1DA1F2"
          />
        </TouchableOpacity>
      </View>
    );
  }
}

或者只需在Home堆栈内添加一个用于切换的按钮即可，

OR just add a button for a toggle in heder left inside Home stack like this

navigationOptions: ({navigation}) => ({
      title: 'Home',
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
          <Icon
            name="ios-menu"
            size={40}
            style={{margin: 10}}
            color="#1DA1F2"
          />
        </TouchableOpacity>
      )
})

推荐答案

导入无效.在 react-navigation-drawer

import { createDrawerNavigator } from 'react-navigation-drawer';
import NavigationDrawerStructure from 'your file path'

代替

import {
      createDrawerNavigator,
      NavigationDrawerStructure,
    } from 'react-navigation-drawer';

这篇关于如何在本机添加抽屉?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！