如何在本机反应中实现抽屉导航器？

Question

您好，我是 react native 的新手，如何在 react native 中实现抽屉导航器。其实我正在关注这个文档

更新：

首页代码如下

constructor(props){
        super(props)
        this.state= {
            icon: null
        }
    }

    render(){
        return(
        <Container>
          <Header style={{backgroundColor:'pink'}} >
             <Button
             transparent
             onPress= {() => this.props.navigation.navigate("DrawerOpen")}>
             <Icon
             style= {{color: '#ffffff', fontSize:25, paddingTop:0}}
             name="bars"             
             />
             </Button>
             </Header>
             <Content>
             </Content>
        </Container>
        );
    }
}

还有

index.js

import CourseListing from './CourseListing';
import SideBar from './SideBar/SideBar';
import {DrawerNavigator} from 'react-navigation';
import Profile from './Profile';

const MyHome =DrawerNavigator(
{
CourseListing: {screen: CourseListing},
Profile: {screen: Profile},
},
{
    contentComponent: props => <SideBar {...props} />
}
);

我收到此错误

Answer 1

除了很棒的文档，我还推荐观看This video。

我建议创建一个名为 Router.js 的文件。它可能看起来像这样：

import React from 'react';
import { DrawerNavigator } from 'react-navigation';
import Screens1 from ... // Import all your screens here
import Screens2 from ...
import Screens3 from ... 

// The DrawerNavigator uses all the screens

export const MyDrawer = DrawerNavigator({
   Screen1: { screen: Screen1 },
   Screen2: { screen: Screen2 },
   Screen3: { screen: Screen3 },
});

确保在您的根目录（通常称为 App.js）中导入 MyDrawer：

import React, { Component } from 'react';
import { MyDrawer } from '(correct path here)/Router.js';

export default class App extends Component {

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

现在，当应用启动时，Screen1 将被加载。由于 DrawerNavigator，每个屏幕都有一个侧面菜单。要在任何屏幕中打开菜单，请使用以下方法：

_openMenu() {
    this.props.navigation.navigate('DrawerOpen');
}

希望这会有所帮助。

Answer 2

就是这样，实现抽屉如stack-navgation 示例：

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

const RouteConfigs =  { 
    signIn
}

const DrawerNavigatorConfig = { 
    drawerPosition:'right',
    drawerType:'front',
    hideStatusBar:true,
    contentComponent:drawer
}

export default createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);

重要的部分是contentComponent in DrawerNavigatorConfig。这是一个打开时显示在抽屉中的视图

Answer 3

import React, { Component } from "react";
import { Dimensions, StyleSheet, } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import color from '../../../constants/color'
import Attendance from '../../ExtraScreens/Attendance/Attendance'
import KIETDigitalDirectory from '../../ExtraScreens/KIETDigitalDirectory/KIETDigitalDirectory'
import KIETExtensions from '../../ExtraScreens/KIETExtensions/KIETExtensions'
import StudentRedressal from '../../ExtraScreens/StudentRedressal/StudentRedressal'
//
import Ticketing from '../../ExtraScreens/Ticketing/Ticketing'
import TicketingApply from '../../ExtraScreens/Ticketing/TicketingApply'
//
import Grievance from '../../ExtraScreens/EmployeeGrievance/Grievance'
import GrievanceApply from '../../ExtraScreens/EmployeeGrievance/GrievanceApply'
export default class Extra extends React.Component {
    render() {
        const Drawer = createDrawerNavigator();
        return (
            <Drawer.Navigator
                drawerType="back"
            // openByDefault
            // overlayColor="transparent"
            >
                <Drawer.Screen name="KIET Extensions" component={KIETExtensions} />
                <Drawer.Screen name="Grievance" component={GrievanceStack} />
                <Drawer.Screen name="Ticketing" component={TicketingStack} />
                <Drawer.Screen name="Student Redressal" component={StudentRedressal} />
                <Drawer.Screen name="Attendance" component={Attendance} />
                <Drawer.Screen name="KIET Digital Directory" component={KIETDigitalDirectory} />
            </Drawer.Navigator>
        )
    }
}

const StackNavigator = createStackNavigator();
const GrievanceStack = (props) => (
    <StackNavigator.Navigator
        initialRouteName="Grievance"
        mode="card"
        headerMode="none"enter code here>
        <StackNavigator.Screen name="Grievance" component={Grievance} />
        <StackNavigator.Screen name="Grievance Apply" component={GrievanceApply} />
    </StackNavigator.Navigator>
)
const TicketingStack = (props) => (
    <StackNavigator.Navigator
        initialRouteName="Ticketing"
        mode="card"
        headerMode="none"
    >`enter code here`
        <StackNavigator.Screen name="Ticketing" component={Ticketing} />
        <StackNavigator.Screen name="Ticketing Apply" component={TicketingApply} />
    </StackNavigator.Navigator>
)