1. 程式人生 > >react native DrawerLayoutAndroid 使用詳解

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._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> ); } }

這裡寫圖片描述