跳到主要内容

提升用户体验

配置文本输入框​

在触屏手机上输入文本是一个挑战——屏幕小，软件键盘。但根据你需要输入的数据类型，通过正确配置文本输入框可以让输入更简便：

  • 自动聚焦第一个输入框
  • 使用占位符文本示例展示预期数据格式
  • 启用或禁用首字母大写和自动纠错
  • 选择键盘类型（例如电子邮件、数字键盘）
  • 确保回车键聚焦下一个输入框或提交表单

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

在键盘显示时管理布局​

软件键盘占据了屏幕差不多一半的空间。如果有交互元素可能被键盘遮挡，请确保它们仍然可访问，可使用 KeyboardAvoidingView 组件 来实现。

增大可点击区域​

在手机上点击按钮时不易精准操作。请确保所有交互元素的尺寸至少为44x44。实现方法之一是给元素留出足够空间，使用 padding、minWidth 和 minHeight 样式属性都很有用。或者，可以使用 hitSlop 属性 来扩大点击区域，同时不改变布局。下面是一个示例：

使用 Android 水波纹效果​

Android API 21+ 使用 Material Design 风格的水波纹效果，给用户在点按屏幕交互区域时的反馈。React Native 通过 TouchableNativeFeedback 组件 暴露此效果。使用此组件代替透明度或高亮效果，通常会让你的应用在该平台更贴切。不过请注意，该组件不支持 iOS 或 Android 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 和 Human Interface Guidelines 是学习移动平台设计的绝佳资源。