web-dev-qa-db-ja.com

反応ネイティブOTP入力画面を設計する方法は？

私はreactNative Designの初心者です。以下に示す画面を実現する方法を教えてください enter image description here

4つのTextInputを使用する必要がありますか、それとも1つで可能ですか？

react-nativereact-routertextinput
6
praj

非表示のTextInput要素を1つだけ使用し、onChangeText関数をアタッチして、テキストビューに入力された値を入力できます（デザインの4つの異なるテキストビューを使用できます）。ユーザーがクリックした場合は、テキストビューのクリックに必ずTextInputのフォーカスを合わせてください。

1
Chethan N

@Chethanの回答で説明されているように、以前は単一の非表示の入力フィールドでこれを行っていました。 RNはすでにAndroidプラットフォームの戻るボタンのコールバックをサポートしているため（RN 0.58以降）、テキスト入力のグループの通常のレイアウトでこれを行うことができます。 iOSの場合はテキスト入力の提案を、Androidの場合は自動入力を検討する必要があります。実際には、これを処理するライブラリを開発しています。ライブラリとその使用方法を紹介する blog とソースコードを次に示します。 ここ です。

0
Anson Yao

これはすでに回答済みです ネイティブベースの複数の入力

これはNativeBaseから実現できます

0
Supriya Kalghatgi

プラグインがあります React Native Phone Verification iOSとAndroid（クロスプラットフォーム）の両方で動作します。これにより、要件に一致する検証コードピッカーを使用できます。

0
Himanshu Dwivedi

このパッケージを試してください https://github.com/Twotalltotems/react-native-otp-input 両方のプラットフォームで最適に動作します

0
anoNewb