From 7b3e321939b16e3fba3c103b4374a3c277e22c65 Mon Sep 17 00:00:00 2001 From: tangshutong Date: Fri, 12 Dec 2025 10:44:29 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E8=BF=81=E7=A7=BB?= =?UTF-8?q?=E5=A3=B0=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: tangshutong --- README.md | 141 ++------------------ doc/en.md | 360 ++++++++++++++++++++++++++++++++++++++++++++++++++ doc/zh-cn.md | 363 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 733 insertions(+), 131 deletions(-) create mode 100644 doc/en.md create mode 100644 doc/zh-cn.md diff --git a/README.md b/README.md index 932cfd5..ed265f1 100644 --- a/README.md +++ b/README.md @@ -1,134 +1,13 @@ -# react-native-text-input-mask -Text input mask for React Native on iOS and Android. +# 迁移声明 - - NPM package version. - - - MIT license. - +- 本仓库已迁移至 GitCode：[OpenHarmony-SIG/rntpc_react-native-text-input-mask](https://gitcode.com/openharmony-sig/rntpc_react-native-text-input-mask)。 +- 包名已更改为 `@react-native-ohos/react-native-text-input-mask`，支持直接从 npm 下载。 +- 更多详情请查阅新仓库的 README 文件。 +- 本仓库旧版本的文档已归档：[链接](/doc/zh-cn.md) -## Examples +# Migration Announcement -![React Native Text Input Mask iOS](https://s3.amazonaws.com/react-native-text-input-mask/react-native-text-input-mask-ios.gif) -![React Native Text Input Mask Android](https://s3.amazonaws.com/react-native-text-input-mask/react-native-text-input-mask-android-updated.gif) - -## Setup - -```bash -npm install --save react-native-text-input-mask - -# --- or --- - -yarn add react-native-text-input-mask -``` - -# Installation - -
- For RN >= 0.60 - -#### iOS -1. Configure pods (static or dynamic linking) -
- Static Library ( Podfile has no use_frameworks! ) -Add following lines to your target in `Podfile`. Linking is not required in React Native 0.60 and above. - -```ruby -pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text', :modular_headers => true -``` -
-
- Dynamic Framework ( Podfile has use_frameworks! ) -Add following lines to your target in `Podfile` if it doesnt exist. Linking is not required in React Native 0.60 and above. - -``` -use_frameworks! -``` -
- -2. Run `pod install` in the `ios` directory. - -#### Android - -No need to do anything. - -
- -
For RN < 0.60 - -### WARNING! This is no longer officially supported, these instructions are out of date and may no longer work, we recommend upgrading to a newer version of React Native. - -### Link -```bash -react-native link react-native-text-input-mask -``` - -**iOS only:** you have to drag and drop `InputMask.framework` to `Embedded Binaries` in General tab of Target - -![](https://cdn-images-1.medium.com/max/2000/1*J0TPrRhkAKspVvv-JaZHjA.png) - -### Manual installation - -#### iOS - -1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]` -2. Go to `node_modules` ➜ `react-native-text-input-mask` and add `RNTextInputMask.xcodeproj` -3. In XCode, in the project navigator, select your project. Add `libRNTextInputMask.a` to your project's `Build Phases` ➜ `Link Binary With Libraries` -4. Run your project (`Cmd+R`) - -#### Android - -1. Open up `android/app/src/main/java/[...]/MainActivity.java` - - Add `import com.RNTextInputMask.RNTextInputMaskPackage;` to the imports at the top of the file - - Add `new RNTextInputMaskPackage()` to the list returned by the `getPackages()` method -2. Append the following lines to `android/settings.gradle`: - ``` - include ':react-native-text-input-mask' - project(':react-native-text-input-mask').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-text-input-mask/android') - ``` -3. Insert the following lines inside the dependencies block in `android/app/build.gradle`: - ``` - compile project(':react-native-text-input-mask') - ``` -
- -## Usage - -```javascript -import TextInputMask from 'react-native-text-input-mask'; -... - { - console.log(formatted) // +1 (123) 456-78-90 - console.log(extracted) // 1234567890 - }} - mask={"+1 ([000]) [000] [00] [00]"} -/> -... -``` - -## Testing - -### Jest - -Make sure to [mock](https://jestjs.io/docs/en/manual-mocks#mocking-node-modules) the following to `jest.setup.js`: -```javascript -jest.mock('react-native-text-input-mask', () => ({ - default: jest.fn(), -})) -``` - -## More info - -[RedMadRobot Input Mask Android](https://github.com/RedMadRobot/input-mask-android) - -[RedMadRobot Input Mask IOS](https://github.com/RedMadRobot/input-mask-ios) - -## Versioning - -This project uses semantic versioning: MAJOR.MINOR.PATCH. -This means that releases within the same MAJOR version are always backwards compatible. For more info see [semver.org](http://semver.org/). - -## Local Development and testing -To use a local copy with your project, it's highly recommended to use https://github.com/wix/wml +- This repository has been migrated to GitCode：[OpenHarmony-SIG/rntpc_react-native-text-input-mask](https://gitcode.com/openharmony-sig/rntpc_react-native-text-input-mask) +- The package name has been changed to `@react-native-ohos/react-native-text-input-mask` and is now available for direct download from npm. +- For more details, please refer to the README in the new repository. +- Archived documentation for versions in this repository can be found here: [Link](/doc/en.md) diff --git a/doc/en.md b/doc/en.md new file mode 100644 index 0000000..eeeb28f --- /dev/null +++ b/doc/en.md @@ -0,0 +1,360 @@ +> Template version: v0.2.2 + +

+

react-native-text-input-mask

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-text-input-mask) + +## Installation and Usage + +Find the matching version information in the release address of a third-party library：[@react-native-oh-tpl/react-native-text-input-mask Releases](https://github.com/react-native-oh-library/react-native-text-input-mask/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. + +Go to the project directory and execute the following instruction: + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-text-input-mask +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-text-input-mask +``` + + + +The following code shows the basic use scenario of the repository: + +> [!WARNING] The name of the imported repository remains unchanged. + +```tsx +import React, { useState, useRef } from "react"; +import { + StyleSheet, + Text, + View, + ScrollView, + Button, + TextInput, +} from "react-native"; +import TextInputMask, { + mask, + unmask, + setMask, +} from "react-native-text-input-mask"; +import { Colors } from "react-native/Libraries/NewAppScreen"; +export const TextInputTest = () => { + const [maskTest, maskValue] = useState(""); + const maskDemo = () => { + mask("+1 ([000]) [000] [00] [00]", "13343469915", true) + .then((res) => { + maskValue(res); + }) + .catch((err) => { + console.log("error", err); + }); + }; + + const [unmaskTest, unmaskValue] = useState(""); + const unmaskDemo = () => { + unmask("+1 ([000]) [000] [00] [00]", "13343469915", true) + .then((res) => { + unmaskValue(res); + }) + .catch((err) => { + console.log("error", err); + }); + }; + const customNotations = [ + { character: "s", characterSet: "$€", isOptional: true }, + ]; + const [onChangeTextTest_formatted, setonChangeTextValue_formatted] = + useState(""); + const [onChangeTextTest_extracted, setonChangeTextValue_extracted] = + useState(""); + const componentDemo = (formatted: string, extracted: string | undefined) => { + console.log("formatted", formatted); + setonChangeTextValue_formatted(formatted); + console.log("extracted", extracted); + if (extracted) { + setonChangeTextValue_extracted(extracted); + } + }; + return ( + + + + {onChangeTextTest_formatted} + {onChangeTextTest_extracted} + + + Phone Number: +