標籤:style margin ntop idt 調用 stat out ati center
/**
* 組件DrawerLayoutAndroid(安卓抽屜的實現)
本篇DrawerLayoutAndroid屬性和方法比較全一點
* */
import React,{PureComponent} from ‘react‘
import {View,DrawerLayoutAndroid,Text,Dimensions,TextInput,TouchableOpacity} from ‘react-native‘
class DrawerLayoutObj extends PureComponent {
openDrawer=()=>{
this.refs.drawerLayout.openDrawer()
};
closeDrawer=()=>{
this.refs.drawerLayout.closeDrawer()
};
render() {
var navigationView = (
<View style={{flex: 1, backgroundColor: ‘#fff‘}}>
<Text style={{marginTop: 45, fontSize: 20, textAlign: ‘center‘}}>菜單列表</Text>
<Text style={{marginTop: 45, fontSize: 20, textAlign: ‘center‘}}>菜單列表</Text>
<Text style={{marginTop: 45, fontSize: 20, textAlign: ‘center‘}}>菜單列表</Text>
<Text style={{marginTop: 45, fontSize: 20, textAlign: ‘center‘}}>菜單列表</Text>
<Text style={{marginTop: 45, fontSize: 20, textAlign: ‘center‘}}>菜單列表</Text>
<Text style={{marginTop: 45, fontSize: 20, textAlign: ‘center‘}}>菜單列表</Text>
<Text style={{marginTop: 45, fontSize: 20, textAlign: ‘center‘}}>菜單列表</Text>
</View>
);
return (
<DrawerLayoutAndroid
ref={‘drawerLayout‘}
drawerLockMode=‘unlocked‘
drawerWidth={Dimensions.get(‘window‘).width-100}
drawerPosition={DrawerLayoutAndroid.positions.Left}
keyboardDismissMode="on-drag"
onDrawerClose={()=>{}}
onDrawerOpen={()=>{}}
renderNavigationView={() => navigationView}
rawerBackgroundColor="rgba(188,0,202,0.5)"
statusBarBackgroundColor=‘red‘
>
<View style={{flex: 1, alignItems: ‘center‘}}>
<TouchableOpacity
onPress={()=>this.openDrawer()}
>
<Text style={{margin: 10, fontSize: 15, textAlign: ‘right‘}}>開啟抽屜</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={()=>this.closeDrawer()}
>
<Text style={{margin: 10, fontSize: 15, textAlign: ‘right‘}}>關閉抽屜!</Text>
</TouchableOpacity>
<TextInput />
</View>
</DrawerLayoutAndroid>
);
}
}
export default DrawerLayoutObj;
/***
*
drawerLockMode enum(‘unlocked‘, ‘locked-closed‘, ‘locked-open‘)
設定抽屜的鎖定模式。有三種狀態:
unlocked (預設值),意味著此時抽屜可以響應開啟和關閉的手勢操作。
locked-closed,意味著此時抽屜將保持關閉,不可用手勢開啟。
locked-open,意味著此時抽屜將保持開啟,不可用手勢關閉。
無論抽屜處於那種狀態,都仍然可以調用openDrawer/closeDrawer這兩個方法開啟和關閉。
drawerPosition enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right)
指定抽屜可以從螢幕的哪一邊滑入。
drawerWidth number
指定抽屜的寬度,也就是從螢幕邊緣拖進的視圖的寬度。
keyboardDismissMode enum(‘none‘, "on-drag")
指定在拖拽的過程中是否要隱藏軟鍵盤。
none (預設值),拖拽不會隱藏軟鍵盤。
on-drag 當拖拽開始的時候隱藏軟鍵盤。
onDrawerClose function
每當導航視圖(抽屜)被關閉之後調用此回呼函數。
onDrawerOpen function
每當導航視圖(抽屜)被開啟之後調用此回呼函數。
onDrawerSlide function
每當導航視圖(抽屜)產生互動的時候調用此回呼函數。
onDrawerStateChanged function
每當抽屜的狀態變化時調用此回呼函數。抽屜可以有3種狀態:
idle(空閑),表示現在導航條上沒有任何進行中的互動。
dragging(拖拽中),表示使用者正在與導航條進行互動。
settling(停靠中),表示使用者剛剛結束與導航條的互動,導航條正在結束開啟或者關閉的動畫。
renderNavigationView function
此方法用於渲染一個可以從螢幕一邊拖入的導航視圖。
drawerBackgroundColor //這個屬性貌似不起作用
指定抽屜的背景顏色。
預設值為白色。
若要設定抽屜的不透明度,請使用rgba。
statusBarBackgroundColor
設定狀態列顏色(支援API21+/安卓系統5.0以上)
此組件還提供openDrawer 與 closeDrawer
openDrawer:開啟抽屜
closeDrawer:關閉抽屜
ref={‘drawerLayout‘} //配套使用
openDrawer(){
this.refs.drawerLayout.openDrawer()
}
closeDrawer(){
this.refs.drawerLayout.closeDrawer()
}
* ***/
react native中組件DrawerLayoutAndroid(安卓抽屜的實現)