如何使用DrawerLayoutAndroid组件在原生响应应用中构建抽屉

Question

我是react native的新手，我正在尝试构建汉堡包抽屉来帮助导航。但我找不到合适的文件。我找到了一个，但它是redux，所以我放弃了它。有人能指导我如何创建响应原生应用的抽屉布局吗?

Answer 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;

你应该把drawlayout打开方法作为props传递给工具栏，在你的工具栏组件中，你应该调用sidebarRef作为props，它会自动调用之前的OpenDraweFromToolbar.js中的drawlayout打开方法。

我希望你能从上面的样品中得到帮助。快乐编码!!