Hộp thoại đơn giản React Native
⚛ Hộp thoại React Native đa nền tảng dựa trên thành phần Modal.
Tính năng
- Hộp thoại Tùy chỉnh
- Hộp thoại Xác nhận
- Hộp thoại Tiến trình
Expo Snack
Một Expo Demo Link
Ảnh chụp màn hình
| Android | iOS |
|---|---|
 |
 |
 |
 |
 |
 |
Yêu cầu
- React Native >= 0.44.0
GHI CHÚ
- Đối với RN 0.58.0 hoặc sau đó, sử dụng react-native-simple-dialogs@latest
- Đối với RN 0.56.0 … 0.57.8, sử dụng react-native-simple-dialogs@1.0.0
- Đối với RN 0.44.0 … 0.55.4, sử dụng react-native-simple-dialogs@0.3.1
Cài đặt
yarn add react-native-simple-dialogs
Hoặc
npm i -S react-native-simple-dialogs
Sử dụng
Hộp thoại Tùy chỉnh
import { Dialog } from 'react-native-simple-dialogs';
<Dialog
visible={this.state.dialogVisible}
title="Custom Dialog"
onTouchOutside={() => this.setState({dialogVisible: false})} >
<View>
// your content here
</View>
</Dialog>
Các thuộc tính có sẵn
| Tên | Loại | Mặc định | Mô tả |
|---|---|---|---|
| hiển thị | Boolean | sai | Hiển thị modal? |
| onRequestClose | Function | null | Gọi lại được gọi khi người dùng chạm vào nút back trên phần cứng trên Android |
| animationType | Enum(‘none’, ‘slide’, ‘fade’) | ‘none’ | Kiểm soát cách modal được thực hiện hiệu ứng |
| onShow | Function | null | Gọi lại được gọi khi modal đã được hiển thị |
| onOrientationChange | Function | null | Gọi lại được gọi khi sự thay đổi hướng trong khi modal đang được hiển thị trên iOS |
| supportedOrientations | Mảng của Enum(‘portrait’, ‘portrait-upside-down’, ‘landscape’, ‘landscape-left’, ‘landscape-right’) | ‘portrait’ | Hướng cho phép trong khi modal đang được hiển thị. Thêm thông tin tại react-native docs |
| statusBarTranslucent | Boolean | null | Xác định liệu modal của bạn có nên điều chỉnh dưới thanh trạng thái hệ thống hay không. Thêm thông tin tại react-native docs |
| onTouchOutside | Function | null | Gọi lại được gọi khi người dùng chạm bên ngoài modal đang hiển thị |
| tiêu đề | Chuỗi | null | Tiêu đề của modal |
| titleStyle | Text StyleSheet | null | Đối tượng kiểu văn bản tùy chỉnh cho tiêu đề modal |
| dialogStyle | View StyleSheet | null | Kiểu xem tùy chỉnh cho hộp thoại |
| contentStyle | View StyleSheet | null | Kiểu xem tùy chỉnh cho nội dung hộp thoại |
| buttonsStyle | View StyleSheet | null | Kiểu xem tùy chỉnh cho bao bọc nút hộp thoại |
| overlayStyle | View StyleSheet | null | Kiểu xem tùy chỉnh cho lớp phủ của hộp thoại |
| buttons | Node React | null | Thành phần nút modal |
| keyboardDismissMode | Enum(‘none’, ‘on-drag’, ‘interactive’) | null | Determines whether the keyboard gets dismissed in response to a drag. |
| keyboardShouldPersistTaps | Enum(‘always’, ‘never’, ‘handled’, false, true) | null | Determines when the keyboard should stay visible after a tap. |
Hộp thoại Xác nhận
import { ConfirmDialog } from 'react-native-simple-dialogs';
// with message
<ConfirmDialog
title="Confirm Dialog"
message="Are you sure about that?"
visible={this.state.dialogVisible}
onTouchOutside={() => this.setState({dialogVisible: false})}
positiveButton={{
title: "YES",
onPress: () => alert("Yes touched!")
}}
negativeButton={{
title: "NO",
onPress: () => alert("No touched!")
}}
/>
// with custom content
<ConfirmDialog
title="Confirm Dialog"
visible={this.state.dialogVisible}
onTouchOutside={() => this.setState({dialogVisible: false})}
positiveButton={{
title: "OK",
onPress: () => alert("Ok touched!")
}} >
<View>
// your content here
</View>
</ConfirmDialog>
Các thuộc tính có sẵn
| Tên | Loại | Mặc định | Mô tả |
|---|---|---|---|
| …{Dialog.props} | Dialog Props | null | Các thuộc tính giống như thành phần Hộp thoại |
| tin nhắn | Chuỗi | null | Tin nhắn được hiển thị trong hộp thoại xác nhận |
| messageStyle | Text StyleSheet | null | Kiểu văn bản tùy chỉnh cho tin nhắn |
| nút âm | Button Props | null | Đối tượng phần tử nút để mô tả nút âm. Xem dưới đây để biết chi tiết về hình dạng nút |
| nút dương | Button Props | YÊU CẦU | Đối tượng phần tử nút để mô tả nút dương. Xem dưới đây để biết chi tiết về hình dạng nút |
Thuộc tính nút
| Tên | Loại | Mặc định |
|---|---|---|
| tiêu đề | Chuỗi | YÊU CẦU |
| onPress | Function | YÊU CẦU |
| vô hiệu hóa | Boolean | null |
| kiểu tiêu đề | Text StyleSheet | null |
| kiểu | View StyleSheet | null |
Hộp thoại Tiến trình
import { ProgressDialog } from 'react-native-simple-dialogs';
<ProgressDialog
visible={this.state.progressVisible}
title="Progress Dialog"
message="Please, wait..."
/>
Các thuộc tính có sẵn
| Tên | Loại | Mặc định | Mô tả |
|---|---|---|---|
| …{Dialog.props} | Dialog Props | null | Các thuộc tính giống như thành phần Hộp thoại |
| tin nhắn | Chuỗi | null | Tin nhắn được hiển thị trong hộp thoại tiến trình |
| messageStyle | Text StyleSheet | null | Kiểu văn bản tùy chỉnh cho tin nhắn |
| màu hoạt động chỉ thị | màu | null | Màu trước cảnh báo của bộ quay |
| kích thước hoạt động chỉ thị | enum(‘small’, ‘large’), số | null | Kích thước của chỉ thị. Chỉ số chỉ được hỗ trợ trên Android |
| kiểu hoạt động chỉ thị | View StyleSheet | null | Kiểu tùy chỉnh cho chỉ thị hoạt động |
Thêm thông tin tại sample project.
Đóng góp
Chào đón các tính năng mới, sửa lỗi và cải tiến! Để đặt câu hỏi và đề xuất, hãy sử dụng issues.
Lịch sử Sao
Giấy phép
The MIT License (MIT)
Copyright (c) 2017 Douglas Nassif Roma Junior
Xem đầy đủ tại license file.
Chi tiết tải về:
Tác giả: douglasjunior
Nguồn: https://github.com/douglasjunior/react-native-simple-dialogs
Giấy phép: MIT license
