在 iOS 上的 NativeScript 中使用数字键盘

我怎样才能得到数字键盘呢？

很高兴你问！只需在你的 XML/HTML 中指定一个 keyboardType，就像下面示例中展示的那样。左边是 number，右边是 phone。注意光标在屏幕的前两个字段中。

<TextView keyboardType="number" text="1.23"/>	<TextView keyboardType="phone" text="12.34"/>

 

那么这些有什么问题呢？

假设你想要让用户使用 PIN 码（纯数字）登录，那么这些键盘就会显示比你想要的更多字符。当然，对于网页表单或基于 webview 的混合应用，你可能已经习惯了这些键盘，但为什么不抓住机会打造更好的用户体验呢？✨ 打磨一切！✨

替代方案：其他 keyboardType

官方的 NativeScript 键盘文档 是学习你的应用程序可以使用哪些不同类型的键盘的好地方。但是，如果你不介意深入挖掘，iOS 实际上支持比 NativeScript 抽象目前公开的更多键盘类型。

更简洁的 phone 键盘

上面那个 phone 键盘最令人分心的地方就是左下角标记为 +*# 的按钮，对吧？你可以通过将键盘类型更改为 numnberPad 来去掉它，但在撰写本文时，相应的枚举 并不包含它 (功能请求在此处)。但由于这是 NativeScript，我们可以自己动手！这个例子假设你使用的是 Angular，但 vanilla NativeScript 的方法类似。

因此，我们注入视图组件，然后用我们在 Apple 文档中找到的一些枚举值 覆盖原生 keyboardType 属性。

什么？你想在这个现在空的框里添加小数点？只需使用常量 '8' 来获取所谓的 decimalPad。根据手机的区域设置，会显示点或逗号。

iPad 怎么办？不幸的是，iPad 没有纯数字键盘。你所能达到的最好的效果就是 上面有一排数字，下面有两排乱七八糟的东西 的键盘。

替代的替代方案：自定义键盘

如果你想超越默认提供的功能并使用自定义键盘怎么办？我找到一个不错的开源键盘，把它封装在一个 插件 中，并创建了一个 演示应用程序，我想向你展示。

 

该插件扩展了 NativeScript TextView，因此将其添加到你的应用程序中就像 1-2-3 那样简单。

1. 运行 $ tns plugin add nativescript-numeric-keyboard
2. 将命名空间添加到你的页面：<Page xmlns:NK="nativescript-numeric-keyboard">
3. 用 <NK:NumericKeyboardView> 替换 <TextView>

<NK:NumericKeyboardView noDecimals="true" text="345"/>	<NK:NumericKeyboardView returnKeyTitle="OK" text="234.56"/>

 

不错，Angular 怎么办？

我已经考虑到了！只需打开 app.module.ts 并添加

对于视图，你可以参考上面的示例，只需用 <NumericKeyboard> 替换 <NK:NumericKeyboardView>。

对我来说太花哨了，我想从代码中做

随意吧，请参考 GitHub 仓库中的详细 说明。