如何使用DrawerLayoutAndroid组件在本机应用程序中构建抽屉? [英] how to use DrawerLayoutAndroid component for building drawer in react-native apps?

问题描述

大家好，我是新来的人，我想尝试构建汉堡抽屉来帮助导航，但找不到合适的文档.我找到了一个，但是它与redux一起使用，所以我放手了.谁能指导我如何为本机应用程序创建抽屉布局. 预先感谢.

Hey guys i am new to react native trying to build hamburger drawer to assist in navigation but could not find proper documentation. I found one but it was with redux so i let it go. can anybody guide me how to create drawerlayout for react-native apps. Thanks in advance.

推荐答案

您可以从以下代码示例获取帮助: 您的toolbar.js可以是:

You can take help from below code sample : Your toolbar.js can be as:

'use strict';

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

var ToolbarAndroid = require('ToolbarAndroid');

class MyToolbar extends Component {
render() {
  var navigator = this.props.navigator;
   return (
    <ToolbarAndroid
     title={this.props.title}
     navIcon={require('./icons/ic_menu_white_24dp.png')}
     style = {styles.toolbar}
     titleColor={'white'} 
     onIconClicked={this.props.sidebarRef}/>
    );
 }

const styles = StyleSheet.create({
//define your own style
}  
 });

module.exports = MyToolbar;

并用于实现抽屉:

'use strict';

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Navigator,
  TouchableHighlight,
  TouchableOpacity, 
  DrawerLayoutAndroid,
  ScrollView,
} from 'react-native';

var ToolbarAndroid = require('ToolbarAndroid');
var MyToolbar = require('./MyToolbar');
var MenuItem = require('./MenuItem');

class OpenDraweFromToolbar extends Component {
 render() {

  var navigationView = (
     <ScrollView>
  <View style = {{height:100, backgroundColor:'blue', justifyContent:'center'}}>
     <Text style = {{height:25, color:'white', fontSize:25, marginLeft:20}}>Welcome To ReactNative</Text>
  </View>
  <ListView
       //render your list items
  </ScrollView>
);

return (
  <DrawerLayoutAndroid
    drawerWidth={300}
    drawerPosition={DrawerLayoutAndroid.positions.Left}
    renderNavigationView={() => navigationView}
    ref={'DRAWER'}>     
    <MyToolbar style={styles.toolbar}
        title={'Calendar'}
        navigator={this.props.navigator}
        {sidebarRef={()=>this._setDrawer()}}/>                  
    <View style={{flex: 1, alignItems: 'center'}}>            
      <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>

    </View>
  </DrawerLayoutAndroid>  
);
}

 _setDrawer() {
   this.refs['DRAWER'].openDrawer();
  }  
 }

 const styles = StyleSheet.create({
   //your own style implementation

 });

  module.exports = OpenDraweFromToolbar;

您应将抽屉布局打开方法作为道具传递给工具栏，并且在工具栏组件中应将sidebarRef称为道具，后者将自动调用先前OpenDraweFromToolbar.js的抽屉布局打开方法.

You should pass drawerlayout opening method as props to toolbar and in your toolbar component you should call sidebarRef as props, which automatically call the drawerlayout opening method of previous OpenDraweFromToolbar.js.

希望您能从上面的示例中获得帮助.编码愉快！！

I hope you will get help from the above sample.Happy coding !!!

这篇关于如何使用DrawerLayoutAndroid组件在本机应用程序中构建抽屉?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！