跳到主要内容

改进用户体验

配置文本输入​

在触摸屏手机上输入文本是一个挑战——屏幕小、软件键盘。但是，根据你需要的数据类型，通过正确配置文本输入可以使其更容易

  • 自动聚焦第一个字段
  • 使用占位符文本作为预期数据格式的示例
  • 启用或禁用自动大写和自动更正
  • 选择键盘类型（例如，电子邮件、数字）
  • 确保回车键聚焦到下一个字段或提交表单

查看 TextInput 文档以获取更多配置选项。

在键盘可见时管理布局​

软件键盘几乎占据了一半屏幕。如果你有可能会被键盘覆盖的交互元素，请确保它们仍然可以通过使用 KeyboardAvoidingView 组件来访问。

增大可点击区域​

在手机上，按下按钮时很难非常精确。确保所有交互元素的大小为 44x44 或更大。一种方法是为元素留出足够的空间，padding、minWidth 和 minHeight 样式值对此很有用。另外，你可以使用 hitSlop 属性来增加交互区域而不影响布局。这是一个演示

使用安卓水波纹效果​

安卓 API 21+ 使用 Material Design 的水波纹效果来在用户触摸屏幕上的可交互区域时提供反馈。React Native 通过 TouchableNativeFeedback 组件暴露了这一点。使用这种触摸效果而不是透明度或高亮显示通常会让你的应用程序在平台上感觉更贴合。话虽如此，在使用它时你需要小心，因为它在 iOS 或安卓 API < 21 上不起作用，所以你需要回退到在 iOS 上使用其他 Touchable 组件之一。你可以使用像 react-native-platform-touchable 这样的库来为你处理平台差异。

屏幕方向锁定​

默认情况下，多种屏幕方向应该都能正常工作，除非你使用 Dimensions API 并且不处理方向更改。如果你不想支持多种屏幕方向，可以将屏幕方向锁定为纵向或横向。

在 iOS 上，在 Xcode 的 General 选项卡和 Deployment Info 部分启用你想要支持的设备方向（进行更改时请确保你已从设备菜单中选择 iPhone）。对于 Android，打开 AndroidManifest.xml 文件并在 activity 元素中添加 'android:screenOrientation="portrait"' 以锁定为纵向，或 'android:screenOrientation="landscape"' 以锁定为横向。

了解更多

Material Design 和 人机界面指南 是学习更多关于移动平台设计的优秀资源。