0.56

帮助改进此文档

DrawerLayoutAndroid

本文档贡献者：sunnylqm(100.00%)

封装了 Android 平台DrawerLayout的 React 组件。抽屉（通常用于导航切换）是通过renderNavigationView方法渲染的，并且 DrawerLayoutAndroid 的直接子视图会成为主视图（用于放置内容）。导航视图一开始在屏幕上并不可见，不过可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定。

译注：此组件仅能在 Android 上使用。我们推荐使用跨平台的react-navigation中的 DrawerNavigation 来代替此组件。

示例：

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>
  );
},

查看 Props

查看方法

文档

Props

renderNavigationView

The navigation view that will be rendered to the side of the screen and can be pulled in.

类型必填
function是

onDrawerClose

Function called whenever the navigation view has been closed.

类型必填
function否

drawerPosition

Specifies the side of the screen from which the drawer will slide in.

类型必填
enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right)否

drawerWidth

Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.

类型必填
number否

keyboardDismissMode

Determines whether the keyboard gets dismissed in response to a drag.

  • 'none' (the default), drags do not dismiss the keyboard.
  • 'on-drag', the keyboard is dismissed when a drag begins.
类型必填
enum('none', 'on-drag')否

drawerLockMode

Specifies the lock mode of the drawer. The drawer can be locked in 3 states:

  • unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
  • locked-closed, meaning that the drawer will stay closed and not respond to gestures.
  • locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (openDrawer/closeDrawer).
类型必填
enum('unlocked', 'locked-closed', 'locked-open')否

onDrawerOpen

Function called whenever the navigation view has been opened.

类型必填
function否

onDrawerSlide

Function called whenever there is an interaction with the navigation view.

类型必填
function否

onDrawerStateChanged

Function called when the drawer state has changed. The drawer can be in 3 states:

  • idle, meaning there is no interaction with the navigation view happening at the time
  • dragging, meaning there is currently an interaction with the navigation view
  • settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
类型必填
function否

drawerBackgroundColor

Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. Example:

return (
  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)">
  </DrawerLayoutAndroid>
);
类型必填
color否

statusBarBackgroundColor

Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.

类型必填
color否

方法

openDrawer()

openDrawer();

Opens the drawer.

closeDrawer()

closeDrawer();

Closes the drawer.

← 🚧 DatePickerIOSFlatList →