react native DrawerLayoutAndroid 使用詳解
阿新 • • 發佈:2019-02-02
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>
);
}
}