[英]React Native & TextInput : How to get what the use type one by one for Android?
I'm trying to make this OTP
( 6 digits
) input boxes in react native
.我正在尝试在react native
制作这个OTP
( 6 digits
)输入框。 What will happen is - when the user presses any key (except the backspace
key), it should jump to the next box and when the user presses the backspace
key, it should go back to the previous box.将会发生的情况是 - 当用户按下任意键( backspace
键除外)时,它应该跳到下一个框,当用户按下backspace
键时,它应该回到上一个框。
So far it works fine with iOS
, then when I checked on Android
, it doesn't jump to the next box at all.到目前为止,它在iOS
运行良好,然后当我检查Android
,它根本不会跳到下一个框。 I checked online and found out that onKeyPress
is not supported in Android
.我在网上查了一下,发现Android
不支持onKeyPress
。 How can I make it work for android without onKeyPress
?如何在没有onKeyPress
情况下使其适用于 android ? Should I use onChange
?我应该使用onChange
吗? But then how could I know if the user press on backspace
?但是我怎么知道用户是否按下了backspace
?
<TextInput
editable={editable}
value={input_1}
style={styles.totpInputBox}
keyboardType='number-pad'
ref={box_1}
// onChange={({ text }) => {
// setInput_1(text);
// }}
onFocus={() => {
setInput_1('');
}}
onKeyPress={({ nativeEvent }) => {
if (nativeEvent.key === 'Backspace') {
box_1.current.focus();
} else {
setInput_1(nativeEvent.key);
setFocus(1);
}
}}
/>
<TextInput
editable={editable}
value={input_2}
style={styles.totpInputBox}
keyboardType='number-pad'
ref={box_2}
// onChange={({ text }) => {
// setInput_2(text);
// }}
onFocus={() => {
setInput_2('');
}}
onKeyPress={({ nativeEvent }) => {
if (nativeEvent.key === 'Backspace') {
box_1.current.focus();
} else {
setInput_2(nativeEvent.key);
setFocus(2);
}
}}
/>
Thank you.谢谢你。
the docs say it work in android but from soft keyboard
not hardware keyboard
and i think you may ignore hardware keyboard .文档说它可以在 android 中工作,但是来自soft keyboard
而不是hardware keyboard
,我认为您可能会忽略硬件键盘。
Note: on Android only the inputs from soft keyboard are handled, not the hardware keyboard inputs.注意:在 Android 上只处理来自软键盘的输入,而不处理硬件键盘输入。
soft keyboard
and hardware keyboard
? soft keyboard
和hardware keyboard
什么区别? soft keyboard
( onscreen keyboard or software keyboard ) like keyboard in the screen of phone or tablet. soft keyboard
(屏幕键盘或软件键盘)就像手机或平板电脑屏幕上的键盘。
hardware keyboard
( external keyboard ) like keyboard with USB (android support that). hardware keyboard
(外部键盘),如带 USB 的键盘(安卓支持)。
If you test in emulator, try to use the emulator keyboard by mouse, not computer keyboard.如果您在模拟器中进行测试,请尝试通过鼠标使用模拟器键盘,而不是计算机键盘。
I suggest to use this library react-native-confirmation-code-field try snack here我建议使用这个库react-native-confirmation-code-field 在这里尝试小吃
or follow the library way, It uses an invisible component that will be stretched over components.或者按照库的方式,它使用一个不可见的组件,将在组件上拉伸。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.