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

Posted 2023-04-13

【中文标题】如何使用 DrawerLayoutAndroid 组件在 react-native 应用程序中构建抽屉？

【英文标题】：How to use DrawerLayoutAndroid component for building drawer in react-native apps?

【发布时间】：2016-11-06 03:00:17

【问题描述】：

我是原生反应新手，我正在尝试构建汉堡抽屉以协助导航。但我找不到合适的文档。我找到了一个，但它是使用 redux 的，所以我放手了。谁能指导我如何为 react-native 应用程序创建抽屉布局？

【问题讨论】：

您可以使用 androidToolbar 来制作汉堡包图标，就像在原生 android 中使用 DrawerLayoutAndroid ....

【参考方案1】：

您可以从以下代码示例中获得帮助： 您的 toolbar.js 可以是：

'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传递给工具栏，并且在您的工具栏组件中您应该调用sidebarRef作为props，它会自动调用之前OpenDraweFromToolbar.js的drawerlayout打开方法。

希望你能从上面的示例中得到帮助。祝你编码愉快！！！

【讨论】：

嘿，MenuItem 文件由什么组成？你能告诉我MenuItem的结构吗？

@atif MenuItem 是要在列表视图上呈现的项目列表，它是作为应用程序中的一个单独组件编写的。但是现在我已经更新了我的代码，你可以在上面看到..我刚刚在滚动视图中呈现列表视图

如何在任何活动中包含工具栏？我怎么能从其他类调用它。

您可以在上面的代码中看到。将工具栏作为 MyToolbar.js 的一个单独组件，并在您需要时包含它。参考上面的示例。

我按照您的指令代码运行良好，但仍然可以在我的屏幕上看到工具栏，这里是代码“var Toolbar = require(./toolbar)”，我正在访问工具栏文件并在渲染中（ ) 我已经使用