如何在本机添加抽屉?

本文介绍了如何在本机添加抽屉?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

你好，我有一个简单的应用程序，我想向他添加一个抽屉，我使用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 appI 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

尽管我导出了屏幕

这是代码

**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>
      )
})

drawer