react-native-material-menu
Thành phần được viết bằng JavaScript thuần cho React Native với hỗ trợ tự động RTL.
Cài đặt
Sử dụng yarn
yarn add react-native-material-menu
hoặc sử dụng npm
npm install --save react-native-material-menu
Ví dụ sử dụng
import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { Menu, MenuItem, MenuDivider } from 'react-native-material-menu';
export default function App() {
const [visible, setVisible] = useState(false);
const hideMenu = () => setVisible(false);
const showMenu = () => setVisible(true);
return (
<View style={{ height: '100%', alignItems: 'center', justifyContent: 'center' }}>
<Menu
visible={visible}
anchor={<Text onPress={showMenu}>Show menu</Text>}
onRequestClose={hideMenu}
>
<MenuItem onPress={hideMenu}>Menu item 1</MenuItem>
<MenuItem onPress={hideMenu}>Menu item 2</MenuItem>
<MenuItem disabled>Disabled item</MenuItem>
<MenuDivider />
<MenuItem onPress={hideMenu}>Menu item 4</MenuItem>
</Menu>
</View>
);
}
Menu
| Tên | Mô tả | Loại | Mặc định |
|---|---|---|---|
| children | Các thành phần được hiển thị trong menu (bắt buộc) | ReactNode | – |
| anchor | Thành phần nút (bắt buộc) | ReactNode | – |
| visible | Xác định Menu có đang hiển thị | Boolean | – |
| style | Kiểu của Menu | ViewStyle | – |
| onRequestClose | Gọi lại khi menu bị ẩn | Function | – |
| animationDuration | Thay đổi thời gian hoạt hình hiện/ẩn | Number | 300 |
MenuItem
| Tên | Mô tả | Loại | Mặc định |
|---|---|---|---|
| children | Các thành phần con được hiển thị (bắt buộc) | ReactNode | – |
| disabled | Cờ tắt | Boolean | false |
| disabledTextColor | Màu chữ khi bị tắt | String | '#bdbdbd' |
| onPress | Hàm được gọi khi nhấn | Function | – |
| style | Kiểu của container | ViewStyle | – |
| textStyle | Kiểu chữ | TextStyle | – |
| pressColor | Màu khi được nhấn | String | '#e0e0e0' |
Children phải dựa trên thành phần
(như văn bản chính nó, chuỗi, react-native-vector-icons hoặc expo icons) hoặc bạn có thể gặp lỗi trên thiết bị thực.
MenuDivider
| Tên | Mô tả | Loại | Mặc định |
|---|---|---|---|
| color | Màu đường kẻ | String | 'rgba(0,0,0,0.12)' |
Bộ công cụ Pietile native
Hãy xem qua các thành phần khác của chúng tôi cho react-native – pietile-native-kit
Thông tin tải xuống:
Tác giả: mxck
Nguồn: https://github.com/mxck/react-native-material-menu
Giấy phép: MIT license
Cảm ơn bạn!
