跳到主要内容

改善用户体验

配置文本输入框​

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

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

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

当键盘可见时管理布局​

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

使可点击区域更大​

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

使用 Android Ripple 效果​

Android API 21+ 使用 Material Design Ripple 效果，以便在用户触摸屏幕上的可交互区域时提供反馈。React Native 通过 TouchableNativeFeedback 组件 公开了此功能。使用此触摸效果代替不透明度或高亮通常会使您的应用在该平台上感觉更贴合。也就是说，您需要小心使用它，因为它在 iOS 或 Android API < 21 上不起作用，因此您需要回退到在 iOS 上使用其他 Touchable 组件之一。您可以使用像 react-native-platform-touchable 这样的库来为您处理平台差异。

屏幕方向锁定​

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

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

了解更多

Material Design 和 Human Interface Guidelines 是学习更多关于移动平台设计的优秀资源。