JDDrawerLayout (支持lite版)

跨平台抽屉效果组件

属性

drawerPosition JDDrawerLayout.DrawerPosition.Left | JDDrawerLayout.DrawerPosition.Right

指定抽屉可以从屏幕的哪一边滑入

drawerWidth: number

指定抽屉的宽度，也就是从屏幕边缘拖进的视图的宽度

onDrawerClose: function

每当导航视图（抽屉）被关闭之后调用此回调函数。

onDrawerOpen: func

每当导航视图（抽屉）被打开之后调用此回调函数。

visible: boolean

指定抽屉是显示

duration: number

抽屉滑出和收起时间

overlayStyle: View.proptypes.style

蒙层样式

代码示例

import PropTypes from 'prop-types';
import React from 'react';
import {
  View,
  StyleSheet,
} from 'react-native';
import {
  JDDevice,
  JDDrawerLayout,
  JDTouchable,
  JDThemeText,
} from '@jdreact/jdreact-core-lib';
import PageContainer from '../../components/PageContainer';

class JDDrawerLayoutExample extends React.Component {
  static contextTypes = {
    router: PropTypes.object
  };

  state = {
    show: false,
  };

  componentWillUnfocus = () => {
    if (this.state.show) {
      this._closeDrawerLayout();
      return true;
    }
    return false;
  };

  render() {
    return (
      <PageContainer
        title={this.props.title}
        bodyStyle={{ padding: JDDevice.getRpx(20) }}>
        <JDTouchable onPress={this._showDrawerLayout}>
          <View style={styles.btn}>
            <JDThemeText style={styles.btnText}>打开抽屉</JDThemeText>
          </View>
        </JDTouchable>

        <JDDrawerLayout
          visible={this.state.show}
          onDrawerClose={this._closeDrawerLayout}
          drawerPosition={JDDrawerLayout.DrawerPosition.Left}
          drawerWidth={JDDevice.width / 2}>
          <View style={{ flex: 1, alignItems: 'center' }}>
            <JDThemeText style={{ margin: 10, fontSize: 15, textAlign: 'right' }}>Menu1</JDThemeText>
            <JDThemeText style={{ margin: 10, fontSize: 15, textAlign: 'right' }}>Menu2</JDThemeText>
          </View>
        </JDDrawerLayout>

      </PageContainer>
    );
  }

  _showDrawerLayout = (key) => {
    this.setState({
      show: true,
    });
  };

  _closeDrawerLayout = (key) => {
    this.setState({
      show: false,
    });
  };
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  body: {
    flex: 1,
    padding: JDDevice.getRpx(20),
  },
  btn: {
    borderRadius: JDDevice.getDpx(4),
    backgroundColor: '#f23030',
    justifyContent: 'center',
    alignItems: 'center',
    height: JDDevice.getRpx(80),
    marginBottom: JDDevice.getRpx(20),
  },
  btnText: {
    color: '#FFF'
  },
});

module.exports = JDDrawerLayoutExample;

使用效果