在线文档教程

DrawerLayoutAndroid

DrawerLayoutAndroid

包装平台的React组件DrawerLayout(仅限Android)。抽屉(通常用于导航)renderNavigationView和直接的孩子是主视图(你的内容在哪里)。导航视图最初在屏幕上不可见,但可以从drawerPosition道具指定的窗口的侧面拉入,其宽度可以由drawerWidth道具设置。

例:

render: function() { var navigationView = ( <View style={{flex: 1, backgroundColor: '#fff'}}> <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text> </View> return ( <DrawerLayoutAndroid drawerWidth={300} drawerPosition={DrawerLayoutAndroid.positions.Left} renderNavigationView={() => navigationView}> <View style={{flex: 1, alignItems: 'center'}}> <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text> <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text> </View> </DrawerLayoutAndroid> },

道具

ViewPropTypes道具...

drawerBackgroundColor?: color

指定抽屉的背景颜色。默认值是白色。如果您想设置抽屉的不透明度,请使用rgba。例:

return ( <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)"> </DrawerLayoutAndroid>

drawerLockMode?: enum('unlocked', 'locked-closed', 'locked-open')

指定抽屉的锁定模式。抽屉可以被锁定在3种状态: - 解锁(默认),这意味着抽屉会响应(打开/关闭)触摸手势。 - 锁定关闭,这意味着抽屉会保持关闭状态,不会对手势做出反应。 - 锁定打开,这意味着抽屉会保持打开状态,不会对手势做出反应。抽屉可能仍然以编程方式打开和关闭(openDrawer/ closeDrawer)。

drawerPosition?: enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right)

指定抽屉将从中滑入的屏幕侧面。

drawerWidth?: number

指定抽屉的宽度,更准确地说是从窗口边缘拉入的视图的宽度。

keyboardDismissMode?: enum('none', 'on-drag')

确定键盘是否因拖动而被解散。 - '无'(默认),拖动不会关闭键盘。 - '拖动',当拖动开始时,键盘被解除。

onDrawerClose?: function

每当导航视图关闭时调用该函数。

onDrawerOpen?: function

每当导航视图打开时调用该函数。

onDrawerSlide?: function

每当与导航视图进行交互时调用该函数。

onDrawerStateChanged?: function

当抽屉状态发生变化时调用该函数。抽屉可以处于3种状态: - 闲置,意味着当时没有与导航视图发生交互 - 拖动,这意味着当前与导航视图有交互 - 解决,这意味着与导航视图存在交互,并且导航视图正在完成其关闭或开场动画

renderNavigationView: function

导航视图将呈现在屏幕的侧面并且可以被拉入。

statusBarBackgroundColor?: color

使抽屉占据整个屏幕并绘制状态栏的背景以允许它在状态栏上打开。它只会影响API 21+。

方法

openDrawer()

打开抽屉。

closeDrawer()

关闭抽屉。