首页 文章

如何在本机中实现Drawer导航器？

提问于
浏览 次
1

嗨，我是新来回应原生如何在反应原生中实现抽屉导航器 . 其实我正在关注这个文档

Updated:

主页代码如下

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

我收到此错误
DrawerNavigation

react-native navigation-drawer

1 回答

  • 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');
}

    希望这可以帮助 .

    回复于

相关问题