React Native Calculator
Máy tính react native đơn giản và thành phần đầu vào máy tính.
Cài đặt
Sử dụng npm:
npm i -S react-native-calculator
hoặc yarn:
yarn add react-native-calculator
Demo
Thành phần Máy tính
Cách sử dụng
import React from 'react'
import { View } from 'react-native'
import { Calculator } from 'react-native-calculator'
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<Calculator style={{ flex: 1 }} />
</View>
)
}
}
Thuộc tính
Tất cả các thuộc tính thuộc thuộc tính chung và…
| Tên Thuộc tính | Loại Dữ liệu | Giá trị Mặc định | Mô tả |
|---|---|---|---|
| hasAcceptButton | boolean | false | Hiển thị nút chấp nhận sau khi tính toán. |
| style | ViewStyle | Kiểu container. | |
| onCalc | (value : number , text : string ) => void |
Sự kiện nhấp vào nút tính toán. | |
| onAccept | (value : number , text : string ) => void |
Sự kiện nhấp vào nút chấp nhận. | |
| hideDisplay | boolean | false | Ẩn trường văn bản hiển thị. |
Thành phần Đầu vào Máy tính
Cách sử dụng
import React from 'react'
import { View } from 'react-native'
import { CalculatorInput } from 'react-native-calculator'
export default class App extends React.Component {
render() {
return (
<View>
<CalculatorInput
fieldTextStyle={{ fontSize: 24 }}
fieldContainerStyle={{ height: 36 }}
/>
</View>
)
}
}
Thuộc tính
Tất cả các thuộc tính thuộc thuộc tính chung và…
| Tên Thuộc tính | Loại Dữ liệu | Giá trị Mặc định | Mô tả |
|---|---|---|---|
| modalAnimationType | ‘none’ | ‘slide’ | ‘fade’ |
| modalBackdropStyle | ViewStyle | Kiểu nền modal. | |
| fieldContainerStyle | ViewStyle | Kiểu container trường văn bản. | |
| fieldTextStyle | TextStyle | Kiểu văn bản. | |
| onChange | (value : number , text : string ) => void |
Sự kiện thay đổi giá trị. | |
| prefix | string | Tiền tố. | |
| suffix | string | Hậu tố. | |
| onBeforeChange | (value : number , text : string ) => boolean |
Được gọi trước khi thay đổi được áp dụng. Trả về true nếu thay đổi được chấp nhận. | |
| onBeforeChangeAsync | (value : number , text : string ) => Promise<boolean> |
Được gọi bất đồng bộ trước khi thay đổi được áp dụng. Giải quyết với true nếu thay đổi được chấp nhận. |
Thuộc tính Chung
Cảm ơn bạn!
Tên Thuộc tính| Kiểu dữ liệu| Giá trị mặc định| Mô tả
—|—|—|—
decimalSeparator| chuỗi| .| Dấu phân cách thập phân.
thousandSeparator| chuỗi| ,| Dấu phân cách hàng nghìn.
numericButtonBackgroundColor| chuỗi| #ffffff| Màu nền nút số.
numericButtonColor| chuỗi| #aaaaaa| Màu chữ số trên nút số.
actionButtonBackgroundColor| chuỗi| #e7e5e3| Màu nền nút thao tác.
actionButtonColor| chuỗi| #000000| Màu chữ trên nút thao tác.
calcButtonBackgroundColor| chuỗi| #ff8d00| Màu nền nút tính toán.
calcButtonColor| chuỗi| #ffffff| Màu chữ trên nút máy tính.
acceptButtonBackgroundColor| chuỗi| #14CC60| Màu nền nút chấp nhận.
acceptButtonColor| chuỗi| #ffffff| Màu chữ trên nút chấp nhận.
displayBackgroundColor| chuỗi| #ffffff| Màu nền hiển thị số.
displayColor| chuỗi| #000000| Màu chữ trên hiển thị số.
borderColor| chuỗi| #52525B| Màu viền.
fontSize| số| 18| Kích thước font chữ trên nút.
value| số| 0| Giá trị ban đầu.
width| số| (tự động)| Chiều rộng thành phần máy tính.
height| số| (tự động)| Chiều cao thành phần máy tính.
displayHeight| số| (tự động)| Chiều cao của khung hiển thị số.
keyboardHeight| số| (tự động)| Chiều cao của khung bàn phím.
onTextChange| (text: chuỗi) => void| | Sự kiện thay đổi văn bản.
displayTextAlign| "auto" / "left" / "right" / "center" / "justify"| "left"| Căn chỉnh hiển thị số.
noDecimal| boolean| false| Ẩn nút phân cách thập phân để vô hiệu hóa giá trị thập phân.
roundTo| số| 2| Số chữ số sau dấu thập phân để làm tròn giá trị.
Chi tiết tải về:
Tác giả: budiadiono
Nguồn: https://github.com/budiadiono/react-native-calculator
Cảm ơn bạn!
