React 組件封裝平臺(tái) DrawerLayout(僅適用于Android)。Drawer(通常用于導(dǎo)航)呈現(xiàn) renderNavigationView 渲染導(dǎo)航視圖和直接子級(jí),是呈現(xiàn)(您的內(nèi)容)的主要視圖。導(dǎo)航視圖是最初在屏幕上不可見(jiàn)的,但可以從由 drawerPosition 指定的窗口的側(cè)面拉出,其寬度可通過(guò) drawerWidth 設(shè)置。
例如:
render: function() {
var navigationView = (
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the
Drawer!</Text
);
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() =navigationView}
<Text style={{10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
<Text style={{10, fontSize: 15, textAlign: 'right'}}>World!</Text>
</DrawerLayoutAndroid>
);
},
drawerPosition enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right)
指定 drawer 將從屏幕的一側(cè)滑動(dòng)。
drawerWidth number
指定 drawer 的寬度,即從窗口的邊緣拉到視圖更精確的寬度。
keyboardDismissMode enum('none', "on-drag")
確定鍵盤(pán)是否響應(yīng)拖動(dòng)被駁回。
-'none' (默認(rèn)值), 拖動(dòng)不影響鍵盤(pán)。
-'on-drag', 拖動(dòng)開(kāi)始,鍵盤(pán)被駁回。
onDrawerClose 函數(shù)
導(dǎo)航視圖關(guān)閉時(shí)調(diào)用函數(shù)。
onDrawerOpen 函數(shù)
導(dǎo)航視圖打開(kāi)時(shí)調(diào)用函數(shù)。
onDrawerSlide 函數(shù)
與導(dǎo)航視圖交互時(shí)調(diào)用函數(shù)。
onDrawerStateChanged 函數(shù)
當(dāng) Drawer 狀態(tài)發(fā)生變化時(shí)調(diào)用函數(shù),drawer 有 3 種狀態(tài):
- idle, 表示與導(dǎo)航視圖沒(méi)有交互
- dragging,表示目前有與導(dǎo)航視圖的交互
- settling, 表示有與導(dǎo)航視圖的交互,并且導(dǎo)航視圖正在的關(guān)閉或打開(kāi)。
renderNavigationView 函數(shù)
導(dǎo)航圖將被渲染到屏幕的一側(cè),并且可以拉出。