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()
关闭抽屉。