如何使用 DrawerLayoutAndroid 组件在 react-native 应用程序中构建抽屉?

问题描述

我是本机反应的新手，我正在尝试构建汉堡包抽屉以协助导航.但我找不到合适的文档.我找到了一个，但它是用 redux 的，所以我放手了.有人可以指导我如何为 react-native 应用程序创建 drawerlayout 吗?

I am new to react native and I am trying to build hamburger drawer to assist in navigation. But I 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?

推荐答案

您可以从以下代码示例中获取帮助:你的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;

你应该将drawerlayout打开方法作为props传递给toolbar，在你的toolbar组件中你应该调用sidebarRef作为props，它会自动调用之前OpenDraweFromToolbar.js的drawerlayout打开方法.

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 组件在 react-native 应用程序中构建抽屉?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！