如何在 React-Native 中仅获得数字键盘？答案

【问题标题】：How to get ONLY numeric keyboard in React-Native?如何在 React-Native 中仅获得数字键盘？
【发布时间】：2022-01-08 09:33:31
【问题描述】：

我的目标是只获得没有标点符号的数字键盘。 number-pad 无法在每个设备上正常工作，它还允许输入符号“-、_”。那不是我想要的。我注意到当在 TextInput 上将 secureTextEntry 设置为 true 时，键盘正是我想要的，但我不能像这样使用它，因为我的文本被屏蔽了。所以我想知道有没有办法在不屏蔽文本的情况下使用该键盘？是否存在对本机代码的 hack？

所需键盘的屏幕

数字键盘并非适用于所有设备！这是 HONOR 8X 上的数字键盘

【问题讨论】：

标签： android ios react-native

【解决方案1】：

您可以尝试这样做- keyboardType={Platform.OS === 'android' ? “数字”：“数字键盘”} 然后在 onChangeText 的方法调用中执行以下操作：

**const trimNumber = number.replace(/[^0-9]/g, "");

this.setState({ 修剪编号 });**

是TextInput的value属性

value={this.state.trimNumber}

此用户不能提供任何标点符号，如果有，我们限制输入。

【讨论】：

谢谢！但是荣耀 8x 上的数字键盘是不同的，所以在其他设备上可能会有所不同（见固定截图）。此外，以编程方式从字符串中剪切非数值会导致符号在删除前半秒可见，可以通过setNativeProps 处理设置值，但如果我们能找到使用“安全”键盘的方法，为什么要这样做？开心

【解决方案2】：

你可以试试下面的：

keyboardType={Device.isAndroid ? "numeric" : "number-pad"}

还有更多：click here

【讨论】：

谢谢！但是数字键盘在 Honor 8x 上是不同的，因此在其他设备上可能会有所不同（参见固定截图）。我们需要找到更好的方法
当然！给我时间做这方面的研发！我会告诉你。感谢您投票！
我发现react-native/ReactAndroid/src/main/react/views/textinput/ReactEditText.java第771行和ReactTextInputManager.java第102行中使用了键盘inputType，但是看来要看到变化我们需要编译它github.com/facebook/react-native/wiki/Building-from-source
这个问题也可能有帮助github.com/facebook/react-native/issues/4090

【解决方案3】：

根据文档，

你可以这样做：

keyboardType={Platform.OS === 'ios'? "number-pad":"numeric"}

希望对您有所帮助。如有疑问，请随意

【讨论】：

谢谢！但是数字键盘在 Honor 8x 上是不同的，因此在其他设备上可能会有所不同（参见固定截图）。我们需要找到更好的方法

【解决方案4】：

在 IOS 中显示与原始问题中的图片相同的数字键盘。并同时使用returnKeyType。

keyboardType={Platform.OS === 'android' ? "numeric" : "numbers-and-punctuation"}

【讨论】：

【解决方案5】：

试试

<Input keyboardType= 'phone-pad'/>

它对我有用。

或同时适用于 android & ios 或其他东西

 <Input keyboardType= {Platform.OS === 'android' ? 'phone-pad' : (Platform.OS ==='ios'?'number-pad' :'numbers-and-punctuation')} />

你可以在这里查看文档react-native keyboardType

【讨论】：

【解决方案6】：

此键盘仅适用于 secureText secureTextEntry={true}

代码

<Input keyboardType={Device.isAndroid ? "numeric" : "number-pad"}
       secureTextEntry={true} />

【讨论】：