react native DrawerLayoutAndroid 使用详解

DrawerLayoutAndroid 仅限于android平台。

属性：

drawerLockMode: 抽屉锁定模式。

unlocked：默认，抽屉可以通过手势打开和关闭

locked-closed：抽屉关闭并且不可以通过手势打开

locked-open：抽屉打开并且不可以通过手势关闭

drawerPosition：抽屉的位置

DrawerConsts.DrawerPosition.Left：左侧

DrawerConsts.DrawerPosition.Right：右侧

drawerWidth：抽屉宽度

keyboardDismissMode：拖拽过程中是否隐藏键盘

none：默认值，不会

on-drag：隐藏键盘

onDrawerClose：关闭回调函数

onDrawerOpen：打开回调函数

onDrawerSlide：打开或者关闭的时候一直回调函数,参数为event，可以获取到移动位置的偏移。

onDrawerStateChanged：抽屉的状态变化时调用此回调函数

idle （空闲）：导航条上没有任何正在进行的交互

dragging（拖拽中），正在与导航条进行交互

settling（停靠中），结束与导航条的交互

renderNavigationView：渲染抽屉的内容

/**
* Created by mengqingdong on 2017/5/4.
*/
import React, {Component} from 'react';
import {
StyleSheet,
View,
Text,
Button,
DrawerLayoutAndroid,
Navigator,
ToastAndroid,
} from 'react-native';

export default class DrawerLayoutAndroidDemo extends Component {

static navigationOptions = {
title: 'DrawerLayoutAndroid',
};
_drawer;
_navigator;
navigationView = () => {
return (
<View style={{flex:1, backgroundColor: '#ffffff'}}>
<Button title='TO A' onPress={()=>{
this
4000
._drawer.closeDrawer();
this._navigator.push({component:A});
}}></Button>
<Button title='TO B' color='red' onPress={()=>{
this._drawer.closeDrawer();
this._navigator.push({component:B});
}}></Button>
</View>
);
}

_renderScene = (route, navigator)=> {
let Component = route.component;
return <Component route={route} navigator={navigator} openDrawer={this._openDrawer} closeDrawer={this._closeDrawer}/>
}

state = {
drawerLockMode: 'unlocked',
drawerPosition: DrawerLayoutAndroid.positions.Left,
}

_onDrawerSlide = (event) => {
//console.warn(event.nativeEvent.offset);
}

_onDrawerStateChanged = (event) => {
console.warn(event);
}

_openDrawer = ()=>{
this._drawer.openDrawer();
}
_closeDrawer = ()=>{
this._drawer.closeDrawer();
}
render() {

return (
<View style={{flex:1}}>
<View style={{flexDirection:'row',alignItems:'center',flexWrap:'wrap'}}>
<Text>设置drawerLockMode：</Text>
<Button title='unlocked' onPress={()=>{this.setState({drawerLockMode:'unlocked'})}}/>
<Button title='locked-closed' onPress={()=>{this.setState({drawerLockMode:'locked-closed'})}}/>
<Button title='locked-open' onPress={()=>{this.setState({drawerLockMode:'locked-open'})}}/>
</View>
<Button title={this.state.drawerPosition == DrawerLayoutAndroid.positions.Left?'抽屉位置:右侧':'抽屉位置:左侧'}
onPress={()=>{
if(this.state.drawerPosition == DrawerLayoutAndroid.positions.Left){
this.setState({drawerPosition:DrawerLayoutAndroid.positions.Right});
}else{
this.setState({drawerPosition:DrawerLayoutAndroid.positions.Left});
}
}}/>
<DrawerLayoutAndroid
ref={drawer=>this._drawer = drawer}
drawerLockMode={this.state.drawerLockMode}
drawerWidth={300}
drawerPosition={this.state.drawerPosition}
renderNavigationView={this.navigationView}
onDrawerClose={()=>{ToastAndroid.show('close',ToastAndroid.SHORT)}}
onDrawerOpen={()=>{ToastAndroid.show('open',ToastAndroid.SHORT)}}
onDrawerSlide={this._onDrawerSlide}
onDrawerStateChanged={this._onDrawerStateChanged}>
<Navigator
ref={navigator=>this._navigator = navigator}
initialRoute={{component:A,drawer:this._drawer}}
renderScene={this._renderScene.bind(this)}
/>
</DrawerLayoutAndroid>
</View>
);
}
}
class A extends Component {
render() {
const {openDrawer,closeDrawer} = this.props;
return (
<View>
<Button title='打开抽屉' onPress={()=>{openDrawer()}}/>
<Button title='关闭抽屉' onPress={()=>{closeDrawer()}}/>
</View>

);
}
}
class B extends Component {
render() {
return (
<Text style={{fontSize:56}}>B</Text>
);
}
}

github下载地址