react native中組件DrawerLayoutAndroid(安卓抽屜的實現)

來源:互聯網
上載者:User

標籤: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(安卓抽屜的實現)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.