改善用户体验
配置文本输入框
在触屏手机上输入文本是一项挑战——屏幕小,还有软件键盘。不过根据你需要的数据类型,只要正确配置文本输入框,就能让它更容易使用:
- 自动聚焦第一个字段
- 使用占位文本作为期望数据格式的示例
- 启用或禁用自动首字母大写和自动更正
- 选择键盘类型(例如邮箱、数字)
- 确保回车按钮会聚焦下一个字段或提交表单
更多配置选项请查看 TextInput 文档。
- TypeScript
- JavaScript
键盘可见时管理布局
软件键盘会占去几乎一半屏幕。如果你有可能被键盘遮挡的交互元素,请使用 KeyboardAvoidingView 组件 确保它们仍然可访问。
- TypeScript
- JavaScript
使可点击区域更大
在手机上按按钮时很难做到非常精确。请确保所有交互元素至少为 44x44。实现这一点的一种方法是为元素留出足够空间,padding、minWidth 和 minHeight 这些样式值会很有帮助。或者,你也可以使用 hitSlop prop 在不影响布局的情况下增大交互区域。下面是一个演示:
使用 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 部分启用你想支持的设备方向(进行更改时,请确保在 Devices 菜单中选择了 iPhone)。对于 Android,打开 AndroidManifest.xml 文件,并在 activity 元素中添加 'android:screenOrientation="portrait"' 以锁定为竖屏,或添加 'android:screenOrientation="landscape"' 以锁定为横屏。
了解更多
Material Design 和 Human Interface Guidelines 是学习如何为移动平台设计的绝佳资源。