Skip to content

Commit d852892

Browse files
author
ljje
committed
docs: [Issues: #IA7T5D] 新增react-native-masked-text指导文档
1 parent 4c53d93 commit d852892

File tree

1 file changed

+203
-0
lines changed

1 file changed

+203
-0
lines changed

‎zh-cn/react-native-masked-text.md

+203
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<!-- {% raw %} -->
2+
3+
> 模板版本：v0.2.2
4+
5+
<p align="center">
6+
<h1 align="center"> <code>react-native-masked-text</code> </h1>
7+
</p>
8+
<p align="center">
9+
<a href="https://github.com/bhrott/react-native-masked-text">
10+
<img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
11+
</a>
12+
<a href="https://github.com/bhrott/react-native-masked-text/blob/master/LICENSE">
13+
<img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
14+
</a>
15+
</p>
16+
17+
> [!TIP] [Github 地址](https://github.com/bhrott/react-native-masked-text)
18+
19+
## 安装与使用
20+
21+
<!-- tabs:start -->
22+
23+
#### **npm**
24+
25+
```bash
26+
npm install react-native-masked-text@1.13.0
27+
```
28+
29+
#### **yarn**
30+
31+
```bash
32+
yarn add react-native-masked-text@1.13.0
33+
```
34+
35+
<!-- tabs:end -->
36+
37+
下面的代码展示了这个库的基本使用场景：
38+
39+
```js
40+
import React, { useState } from "react";
41+
import { View, StyleSheet } from "react-native";
42+
import { TextInputMask } from "react-native-masked-text";
43+
44+
export const MaskedTextCPF = () => {
45+
const [mask, setMask] = useState({
46+
cpf: "",
47+
});
48+
return (
49+
<View style={styles.container}>
50+
<TextInputMask
51+
type={"cpf"}
52+
value={mask.cpf}
53+
onChangeText={(text) => {
54+
setMask({
55+
cpf: text,
56+
});
57+
}}
58+
style={styles.textInputStype}
59+
/>
60+
</View>
61+
);
62+
};
63+
64+
const styles = StyleSheet.create({
65+
container: {
66+
width: "100%",
67+
},
68+
textInputStype: {
69+
height: 50,
70+
width: "100%",
71+
borderColor: "gray",
72+
borderWidth: 1,
73+
backgroundColor: "white",
74+
},
75+
});
76+
```
77+
78+
## 约束与限制
79+
80+
### 兼容性
81+
82+
本文档内容基于以下版本验证通过：
83+
84+
1. RNOH: 0.72.27; SDK: HarmonyOS-NEXT-DB1; IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.25;
85+
86+
## 属性
87+
88+
> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
89+
90+
> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
91+
92+
> 详情见 [react-native-masked-text](https://github.com/bhrott/react-native-masked-text)
93+
94+
| Name | Description | Type | Required | Platform | HarmonyOS Support |
95+
| --------------------------- | --------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
96+
| type | the type of the mask | string | YES | Android IOS | YES |
97+
| options | set mask type | object | NO | Android IOS | YES |
98+
| onChangeText | set mask | function | NO | Android IOS | YES |
99+
| checkText | Blocking user to add character | function | NO | Android IOS | YES |
100+
| refInput | add the ref to a local var | function | NO | Android IOS | YES |
101+
| customTextInput | the custom text input component | any | NO | Android IOS | YES |
102+
| customTextInputProps | the props to be passed to the custom text input | object | NO | Android IOS | YES |
103+
| includeRawValueInChangeText | provide the masked and the raw text in every text change. | boolean | NO | Android IOS | YES |
104+
105+
#### 目前 type 支持
106+
107+
| Name | Description | required | Type | Platform | HarmonyOS Support |
108+
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------ | ----------- | ----------------- |
109+
| cel-phone | 1.(99) 9999-9999 or (99) 99999-9999 2. +999 999 999 999 | YES | string | Android IOS | YES |
110+
| cpf | Mask: 999.999.999-99 | YES | string | Android IOS | YES |
111+
| cnpj | Mask: 99.999.999/9999-99 | YES | string | Android IOS | YES |
112+
| credit-card | 1.9999 9999 9999 9999 or 9999 \***\* \*\*** 9999 2.9999 999999 99999 or 9999 **\*\*** 99999 3.9999 999999 9999 or 9999 **\*\*** 9999 | YES | string | Android IOS | YES |
113+
| custom | Mask: defined by pattern | YES | string | Android IOS | YES |
114+
| datetime | 1. DD/MM/YYYY HH:mm:ss 2. DD/MM/YYYY 3.MM/DD/YYYY 4.YYYY/MM/DD 5.HH:mm:ss 6.HH:mm 7.HH | YES | string | Android IOS | YES |
115+
| money | Mask: R$999,99 (fully customizable) | YES | string | Android IOS | YES |
116+
| only-numbers | accept only numbers | YES | string | Android IOS | YES |
117+
| zip-code | Mask: 99999-999 | YES | string | Android IOS | YES |
118+
119+
##### 不同 type 支持的 options
120+
121+
- Money type:
122+
123+
| name | type | required | default | description | Platform | HarmonyOS Support |
124+
| ---------- | ------ | -------- | ------- | --------------------------- | ----------- | ----------------- |
125+
| precision | number | no | `2` | The number of cents to show | Android IOS | YES |
126+
| separator | string | no | `,` | The cents separator | Android IOS | YES |
127+
| delimiter | string | no | `.` | The thousand separator | Android IOS | YES |
128+
| unit | string | no | `R$` | The prefix text | Android IOS | YES |
129+
| suffixUnit | string | no | `''` | The sufix text | Android IOS | YES |
130+
131+
- Phone type：
132+
133+
| name | type | required | default | description | Platform | HarmonyOS Support |
134+
| -------- | ------- | -------- | ---------- | ---------------------------------------------------------------- | ----------- | ----------------- |
135+
| maskType | string | no | `maskType` | the type of the mask to use. Available: `BRL` or `INTERNATIONAL` | Android IOS | YES |
136+
| withDDD | boolean | no | `true` | if the mask type is `BRL`, include the DDD | Android IOS | YES |
137+
| dddMask | string | no | `(99) ` | if the mask type is `BRL`, the DDD mask | Android IOS | YES |
138+
139+
- Datetime type：
140+
141+
| name | type | required | default | description | Platform | HarmonyOS Support |
142+
| ------ | ------ | -------- | ------- | ------------------------------- | ----------- | ----------------- |
143+
| format | string | **YES** | | The date format to be validated | Android IOS | YES |
144+
145+
- redit card type：
146+
147+
| name | type | required | default | description | Platform | HarmonyOS Support |
148+
| ---------- | ------- | -------- | -------------------- | ------------------------------------------------------------------------------------ | ----------- | ----------------- |
149+
| obfuscated | boolean | no | `false` | if the mask should be obfuscated or not | Android IOS | YES |
150+
| issuer | string | no | `visa-or-mastercard` | the type of the card mask. The options are: `visa-or-mastercard`, `amex` or `diners` | Android IOS | YES |
151+
152+
- Custom type：
153+
154+
| name | type | required | default | description | Platform | HarmonyOS Support |
155+
| ----------- | ----------------------------- | -------- | --------------------------------------------------------------------- | ----------------------------------------------------- | ----------- | ----------------- |
156+
| mask | string | **YES** | | The mask pattern | Android IOS | YES |
157+
| validator | function | no | function that returns `true` | the function that's validate the value in the mask | Android IOS | YES |
158+
| getRawValue | function | no | return current value | function to parsed value (like unmasked or converted) | Android IOS | YES |
159+
| translation | object (map{string,function}) | no | `9 - digit`, `A - alpha`, `S - alphanumeric`, `* - all, except space` | The translator to use in the pattern | Android IOS | YES |
160+
161+
## API
162+
163+
> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
164+
165+
> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
166+
167+
> 详情见 [react-native-masked-text](https://github.com/bhrott/react-native-masked-text)
168+
169+
##### MaskService
170+
171+
| Name | Description | Type | Required | Platform | HarmonyOS Support |
172+
| ---------- | ----------------------------------------- | -------- | -------- | ----------- | ----------------- |
173+
| toMask | mask a value | function | NO | Android IOS | YES |
174+
| toRawValue | get the raw value of a masked value | function | NO | Android IOS | YES |
175+
| isValid | validate if the mask and the valueg match | function | NO | Android IOS | YES |
176+
| getMask | get the mask used to mask the value | function | NO | Android IOS | YES |
177+
178+
- static toMask(type, value, settings): mask a value
179+
- `type` (String, required): the type of the mask (`cpf`, `datetime`, etc...)
180+
- `value` (String, required): the value to be masked
181+
- `settings` (Object, optional): if the mask type accepts options, pass it in the settings parameter
182+
- static toRawValue(type, maskedValue, settings): get the raw value of a masked value.
183+
- `type` (String, required): the type of the mask (`cpf`, `datetime`, etc...)
184+
- `maskedValue` (String, required): the masked value to be converted in raw value
185+
- `settings` (Object, optional): if the mask type accepts options, pass it in the settings parameter
186+
- static isValid(type, value, settings): validate if the mask and the value match.
187+
- `type` (String, required): the type of the mask (`cpf`, `datetime`, etc...)
188+
- `value` (String, required): the value to be masked
189+
- `settings` (Object, optional): if the mask type accepts options, pass it in the settings parameter
190+
- static getMask(type, value, settings): get the mask used to mask the value
191+
- `type` (String, required): the type of the mask (`cpf`, `datetime`, etc...)
192+
- `value` (String, required): the value to be masked
193+
- `settings` (Object, optional): if the mask type accepts options, pass it in the settings parameter
194+
195+
## 遗留问题
196+
197+
## 其他
198+
199+
## 开源协议
200+
201+
本项目基于 [The MIT License](https://github.com/bhrott/react-native-masked-text/blob/master/LICENSE) ，请自由地享受和参与开源。
202+
203+
<!-- {% endraw %} -->

0 commit comments

Comments
 (0)