跳到主要内容

提升用户体验

配置文本输入框​

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

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

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

当键盘可见时管理布局​

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

使可点击区域更大​

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

使用 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 是了解更多关于移动平台设计的优秀资源。