跳到主要内容

改善用户体验

配置文本输入​

在触摸手机上输入文本是一项挑战——屏幕小，还有软件键盘。但根据所需数据的类型，你可以通过正确配置文本输入来让操作变得更容易：

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

查看 TextInput 文档 了解更多配置选项。

管理键盘可见时的布局​

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

增大可点击区域​

在移动设备上，很难在按下按钮时做到非常精准。确保所有交互元素的尺寸至少为 44x44。一种方法是为元素留出足够的空间，padding、minWidth 和 minHeight 样式值对此很有用。或者，你也可以使用 hitSlop 属性来增大交互区域，同时不影响布局。下面是一个示例：

使用 Android Ripple​

Android API 21+ 使用 material design ripple，在用户触摸屏幕上的可交互区域时提供反馈。React Native 通过 TouchableNativeFeedback 组件提供了这一功能。使用这种触摸效果代替 opacity 或 highlight，通常会让你的应用在该平台上更加协调。不过，使用它时需要谨慎，因为它在 iOS 或 Android API < 21 上无法工作，因此在 iOS 上需要改用其他 Touchable 组件之一。你可以使用 react-native-platform-touchable 之类的库来为你处理平台差异。

锁定屏幕方向​

默认情况下，多种屏幕方向应能正常工作，除非你使用了 Dimensions API 却没有处理方向变化。如果你不想支持多种屏幕方向，可以将屏幕方向锁定为纵向或横向。

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

了解更多

Material Design 和 Human Interface Guidelines 是了解移动平台设计的优秀资源。