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._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下载地址
