跳到主要内容
版本：0.85

提升用户体验

配置文本输入​

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

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

查看 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 是学习如何为移动平台设计的极佳资源。