From 388683511d025f9343a5f4b28cf8233a7acb0d2a Mon Sep 17 00:00:00 2001 From: "786565784@qq.com" Date: Tue, 5 Mar 2024 15:27:23 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[Issues:=20#I95VO7]=20=E6=B7=BB=E5=8A=A0=20?= =?UTF-8?q?react-native-confirmation-code-field=20=E6=8C=87=E5=AF=BC?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-confirmation-code-field.md | 142 +++++++++++++++++++ 1 file changed, 142 insertions(+) create mode 100644 1224/react-native-confirmation-code-field.md diff --git a/1224/react-native-confirmation-code-field.md b/1224/react-native-confirmation-code-field.md new file mode 100644 index 00000000..84171b7d --- /dev/null +++ b/1224/react-native-confirmation-code-field.md @@ -0,0 +1,142 @@ +> 模板版本：v0.1.3 + +

+

react-native-confirmation-code-field

+

+

+ + Supported platforms + + + License + +

+ +> [!tip] [Github 地址](https://github.com/retyui/react-native-confirmation-code-field) + +## 安装与使用 + +#### **npm** + +```bash +npm install react-native-confirmation-code-field@7.3.2 +``` + +#### **yarn** + +```bash +yarn add react-native-confirmation-code-field@7.3.2 +``` + + + +下面的代码展示了这个库的基本使用场景： + +>[!WARNING] 使用时 import 的库名不变。 + +```js +import React, {useState} from 'react'; +import {SafeAreaView, Text, StyleSheet} from 'react-native'; + +import { + CodeField, + Cursor, + useBlurOnFulfill, + useClearByFocusCell, +} from 'react-native-confirmation-code-field'; + +const styles = StyleSheet.create({ + root: {flex: 1, padding: 20}, + title: {textAlign: 'center', fontSize: 30}, + codeFieldRoot: {marginTop: 20}, + cell: { + width: 40, + height: 40, + lineHeight: 38, + fontSize: 24, + borderWidth: 2, + borderColor: '#00000030', + textAlign: 'center', + }, + focusCell: { + borderColor: '#000', + }, +}); + +const CELL_COUNT = 6; + +const App = () => { + const [value, setValue] = useState(''); + const ref = useBlurOnFulfill({value, cellCount: CELL_COUNT}); + const [props, getCellOnLayoutHandler] = useClearByFocusCell({ + value, + setValue, + }); + + return ( + + Verification + ( + + {symbol || (isFocused ? : null)} + + )} + /> + + ); +}; + +export default App; +``` + +## 约束与限制 + +## 兼容性 + +本文档内容基于以下版本验证通过： + +1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.59; +## 组件 + +> [!tip] "Platform"列表示该组件在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该组件；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name| Description| Type | Platform | HarmonyOS Support | +|------------------------------------------ | -------- | -------- | -------- | ----------------- | +| `CodeField` | This a base component that render RootComponent (default: View) with cells that would be returned by renderCell() and a that will be invisible and over all cells within root component | component | All | yes +| `Cursor` | It's a help component for simulation a cursor blinking animation in components | component | All | yes +## CodeField属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------ | ----------------------------------------------------------------------------------------- | ---------------- | -------- | -------- | ----------------- | +| `cellCount` | Number of characters in input (optional, default: 4)| number | yes | All | yes | +| `renderCell?` | Required function for Cell rendering, will be invoke with next options:{index: number, symbol: string, isFocused: boolean} | ReactElement | No | All | yes | +| `RootComponent?` | if you want change root component for example using animations RootComponent={Animated.View} (optional, default View) | ComponentType | No | All | yes | +| `InputComponent?` | If you want to provide a custom TextInput component that can receive the same props (optional, default TextInput) | ComponentType | No | All | yes | +| `rootStyle?` | Styles for root component (optional) | StyleProp | No | All | yes | +| `RootProps?` | Any props that will applied for root component | Object | No | All | yes| +| `textInputStyle?` | Styles for invisible , can be used for testing or debug (optional) | StyleProp | No | All | yes + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/Kureev/react-native-blur/blob/master/LICENSE) ，请自由地享受和参与开源。 -- Gitee From d362ad8cf7d92814b837840b9368197d73b01348 Mon Sep 17 00:00:00 2001 From: "786565784@qq.com" Date: Wed, 6 Mar 2024 09:03:48 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[Issues:=20#I95VO7]=20=E6=B7=BB=E5=8A=A0=20?= =?UTF-8?q?XXX=20=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-confirmation-code-field.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/1224/react-native-confirmation-code-field.md b/1224/react-native-confirmation-code-field.md index 84171b7d..8f6461a5 100644 --- a/1224/react-native-confirmation-code-field.md +++ b/1224/react-native-confirmation-code-field.md @@ -134,6 +134,17 @@ export default App; | `rootStyle?` | Styles for root component (optional) | StyleProp | No | All | yes | | `RootProps?` | Any props that will applied for root component | Object | No | All | yes| | `textInputStyle?` | Styles for invisible , can be used for testing or debug (optional) | StyleProp | No | All | yes +## Hooks + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------ | ----------------------------------------------------------------------------------------- | ---------------- | -------- | -------- | ----------------- | +| `useClearByFocusCell` | Simple hook that add functionality that trim value by pressed cell,After invoke this hook wil return array with two values ` [props,getCellOnLayout] `;
-` props `- an object that you should spreed to ` `
- `getCellOnLayout(index: number): Function` - helper method that returns ` onLayout ` handler
- If you need to style only one borderX (example `borderBottom`) you need to know about React Native issue with [border styles for `` on iOS](https://github.com/facebook/react-native/issues/23537).
- To fix it need `` wrapper for Cell, but don't forger to move `onLayout={getCellOnLayoutHandler(index)` to ``| Function | yes | All | yes | +| `useBlurOnFulfill` | This hook include a logic to blurring` `when value fulfilled You should pass two params:
- `value?: string` - a string value that;
- `cellCount: number`;
Returned value will be a TextInput ref that you should pass to` `component.And when a value length would equal cellCount will be called `.blur()` method.It work perfectly with `useClearByFocusCell` hook | Ref | yes | All | yes + ## 其他 -- Gitee