React Native 中的 iPad 数字键盘

Posted 2023-02-23

【中文标题】React Native 中的 iPad 数字键盘

【英文标题】：Number Keypad for iPad in React Native

【发布时间】：2019-11-21 22:19:00

【问题描述】：

我正在 React Native 中开发一个 iPad 应用程序，我想在其中显示仅数字键盘。我使用键盘类型作为电话垫，但显示数字和额外的字符。我应该如何做到这一点？我应该如何在 ios 的原生反应中使用自定义键盘。

【问题讨论】：

如果你使用 react-native 的TextInput，你可以选择keyboardType。这是针对不同keyboardTypes lefkowitz.me/… 的视觉指南。 numeric 将为您提供一个仅适用于 ios 和 android 的数字键盘。

【参考方案1】：

我附上了下面的屏幕截图，说明您可以显示多少种键盘类型以及它们各自的keywords。

对于您的情况，只需添加

keyboardType="数字键盘"

如果您在键盘上使用 TextInput

更新：对于 iPad，您需要一个只能包含数字的自定义键盘，或者您可以做的是：

即使键盘有字符，也只需从数字输入中删除文本

你可以这样做

`<TextInput 
    placeHolder="*********"
    keyboardType="number-pad"
    onChangeText=this.onChangeText.bind(this)
    value=text
 />` 

`onChangeText(text) 
    const numbers = '0123456789';
    let numberOnly = '';

    for (let i = 0; i < text.length; i++) 
        if (numbers.indexOf(text[i]) > -1) 
            numberOnly += text[i];
        
    
   this.props.passwordChanged(numberOnly); 

【讨论】：

这真的有效吗？我用 iPad 13.4.1 进行了测试，虽然键盘切换到“数字”（用户仍然可以切换回字母）......我期待像 lefkowitz.me/… 这样的东西......我也从 Apple 网站发现了似乎他们确实支持 iPad 数字键盘。 support.apple.com/en-us/HT205374

【参考方案2】：

尝试添加keyboardType="number-pad"。此解决方案适用于 iOS 和 Android。

【讨论】：

@RoshanSinghBisht 感谢您的回答，但您正在使用数字限制文本字段中的字符。但我的问题是我只想在 iPad 中显示数字键盘。

@AmitShetye 那么你需要一个自定义键盘，比如这个。 github.com/reactnativecn/react-native-custom-keyboard