React Native Drawer Menu: Thêm Menu Drawer vào Ứng dụng React Native của Bạn

react-native-drawer-menu

Một thành phần drawer cho Ứng dụng React Native (ios / android)

Tương tự thành phần menu drawer của ứng dụng QQ mobile.

Ví dụ

Nền tảng iOS

Nền tảng Android

Sử dụng

GỢI Ý Trong iOS, thành phần menu drawer nên chỉ được sử dụng trong tuyến đỉnh, vì hành động vuốt từ bên trái của màn hình sang bên phải được thiết kế để loại bỏ tuyến đường khỏi ngăn xếp điều hướng. Bạn nên tránh xung đột của tương tác giao diện người dùng. Ít nhất, đừng sử dụng menu drawer Left để bao gồm các tuyến đường con, hãy sử dụng menu drawer Right nếu cần.

cài đặt từ npm

npm install --save react-native-drawer-menu

nhập vào dự án

import Drawer from 'react-native-drawer-menu';
import {Easing} from 'react-native'; // Customize easing function (Optional)


// in render function
render() {
  // prepare your drawer content
  var drawerContent = (<View style={styles.drawerContent}>
    <View style={styles.leftTop}/>
    <View style={styles.leftBottom}>
      <View><Text>Drawer Content</Text></View>
    </View>
  </View>);
  // customize drawer's style (Optional)
  var customStyles = {
    drawer: {
      shadowColor: '#000',
      shadowOpacity: 0.4,
      shadowRadius: 10
    },
    mask: {}, // style of mask if it is enabled
    main: {} // style of main board
  };
  return (
    <Drawer
      style={styles.container}
      drawerWidth={300}
      drawerContent={drawerContent}
      type={Drawer.types.Overlay}
      customStyles={{drawer: styles.drawer}}
      drawerPosition={Drawer.positions.Right}
      onDrawerOpen={() => {console.log('Drawer is opened');}}
      onDrawerClose={() => {console.log('Drawer is closed')}}
      easingFunc={Easing.ease}
    >
      <View style={styles.content}>
        <Text>{Object.values(Drawer.positions).join(' ')}</Text>
        <Text>{Object.values(Drawer.types).join(' ')}</Text>
      </View>
    </Drawer>
  );
}

Lưu ý: Tham chiếu của menu drawer được truyền vào phần tử nội dung của menu drawer, bạn có thể sử dụng this.props.drawer để gọi các phương thức của đối tượng Menu Drawer như this.props.drawer.closeDrawer()

Thuộc tính

Phương thức thể hiện

Sử dụng ref để gọi các phương thức thể hiện.

Chi tiết tải về:

Tác giả: Tinysymphony
Nguồn: https://github.com/Tinysymphony/react-native-drawer-menu

Giấy phép: MIT license