React Native & TextInput : 如何一一获取 Android 的使用类型？

Posted 2023-04-18

【中文标题】React Native & TextInput : 如何一一获取 Android 的使用类型？

【英文标题】：React Native & TextInput : How to get what the use type one by one for Android?

【发布时间】：2021-09-25 02:22:43

【问题描述】：

我正在尝试在react native 中制作这个OTP (6 digits) 输入框。 会发生什么 - 当用户按下任何键（backspace 键除外）时，它应该跳到下一个框，当用户按下 backspace 键时，它应该回到上一个框。

到目前为止，它在ios 上运行良好，然后当我检查android 时，它根本不会跳转到下一个框。我在网上查了一下，发现Android不支持onKeyPress。没有onKeyPress，我怎样才能使它适用于android？我应该使用onChange 吗？但是我怎么知道用户是否按下了backspace？

             <TextInput
                editable=editable
                value=input_1
                style=styles.inputBox
                keyboardType='number-pad'
                ref=box_1
                // onChange=( text ) => 
                //   setInput_1(text);
                // 

                onFocus=() => 
                 
                
                onKeyPress=( nativeEvent ) => 
                  if (nativeEvent.key === 'Backspace') 
                    box1.current.focus();
                   else 
                    focus(1);
                  
                
              />
        

谢谢。

【参考方案1】：

文档说 work 在 android 中，但来自 soft keyboard 而不是 hardware keyboard 我认为你可能会忽略硬件键盘.

docs 这么说

注意：在 Android 上，仅处理来自软键盘的输入，而不处理 硬件键盘输入。

soft keyboard 和 hardware keyboard 有什么不同？

soft keyboard（屏幕键盘或软件键盘）类似于手机或平板电脑屏幕上的键盘。hardware keyboard（外接键盘）类似于带有USB（安卓支持）。

如果您在模拟器中测试，请尝试通过鼠标使用模拟器键盘，而不是计算机键盘。

如果你不能忽略硬件键盘

我建议使用这个库react-native-confirmation-code-field试试零食here

或者按照库的方式，它使用了一个不可见的组件，它会被拉伸到组件上。