react-native-snackbar-component
Một thành phần snackbar cho Android và iOS, có thể tùy chỉnh và đơn giản.
Xem Google Material Design để biết thêm thông tin về Snackbars.
Cài đặt
npm install --save react-native-snackbar-component
Sử dụng Cơ bản
import SnackBar from 'react-native-snackbar-component'
Mã
<SnackBar visible={true} textMessage="Hello There!" actionHandler={()=>{console.log("snackbar button clicked!")}} actionText="let's go"/>
Tùy chọn
| Thuộc tính | Kiểu | Hiệu ứng | Giá trị Mặc định |
|---|---|---|---|
| visible | boolean | Hiển thị hoặc ẩn snackbar | không có |
| textMessage | string / function | Văn bản thông báo chính, cũng có thể cung cấp một hàm trả về JSX để hiển thị giao diện thông báo tùy chỉnh | không có |
| actionHandler | function | Hàm được gọi khi nút được nhấn, nếu không có nút hoạt động nào được hiển thị | không có |
| actionText | message | Văn bản của nút hoạt động, sẽ tự động chuyển thành chữ in hoa | không có |
| backgroundColor | color | Màu nền của snackbar | #484848 |
| accentColor | color | Màu chữ của nút hoạt động | cam |
| messageColor | color | Màu chữ của văn bản thông báo chính | #FFFFFF |
| distanceCallback | function | Hàm được gọi mỗi khi snackbar di chuyển vào và ra hoặc thay đổi bố cục, hàm sẽ được cung cấp một số chỉ ra khoảng cách mà snackbar chiếm dụng ở phía dưới hoặc trên, dựa trên vị trí. | (khoảng cách) => {} |
| position | string | Vị trí của snackbar: trên, dưới | dưới |
| top / bottom / left / right | number | Sử dụng chúng để đặt vị trí snackbar | 0 |
| autoHidingTime | number | Bao nhiêu mili giây snackbar sẽ bị ẩn | 0 (Không tự động ẩn) |
| containerStyle | object | Ghi đè hoặc thêm kiểu cho View gốc của container | {} |
| messageStyle | object | Ghi đè hoặc thêm kiểu cho văn bản thông báo | {} |
| actionStyle | object | Ghi đè hoặc thêm kiểu cho nút hoạt động | {} |
Lưu ý
- Khi thuộc tính
visiblethay đổi, snackbar sẽ được thực hiện hiệu ứng vào/ra khỏi màn hình - Snackbar sẽ không tự đóng, để tự động đóng sử dụng setTimeout() và thay đổi giá trị được truyền vào thuộc tính thành false,
HOẶC bạn có thể đặtautoHidingTimethành bất kỳ giá trị cụ thể nào để tự đóng snackbar, tuy nhiên bạn sẽ cần thiết lập lạivisiblethành false thủ công sau khi khoảng thời gianautoHidingTimekết thúc, vìvisibleđược điều khiển từ bên ngoài. - Điều này hoạt động tốt kết hợp với react-native-fab. Xem demo để biết ví dụ và hướng dẫn cách sử dụng.
Chi tiết tải về:
Tác giả: SiDevesh
Nguồn: https://github.com/SiDevesh/React-Native-SnackBar-Component
Giấy phép: MIT license
