改进用户体验
配置文本输入
由于触屏手机的小屏幕和软键盘,使得在手机中输入文本成为一件具有挑战的事情。 但是你可以基于你需要的数据配置文本输入让这个过程变得简单。
- 自动对焦( focus )第一个文本域
- 使用placeholder 作为预想的输入格式
- 启用 或者 禁用 自动大写、自动校正
- 选择键盘类型 【例如 email, 数字(numeric)】
- 确保回车按钮对焦到下一个域或者提交表单
- 查看
TextInput
文档 了解更多配置信息
键盘隐藏时的布局管理
软键盘几乎占用将近一半的手机屏幕。 如果你有会被软键盘覆盖的交互式组件,请使用[KeyboardAvoidingView
组件]以确保他们可以在打开键盘时可以被访问。
放大可触控区域
在手机上精准的点击一个按钮是很困难的一件事。 确保所有交互式元素大于等于44x44。 常见的撑大尺寸的做法有:使用 padding
, minWidth
和 minHeight
样式。
或者, 可以使用 hitSlop
属性 无需影响布局来增加可交互区域。 这是一个演示:
使用 Android 水波纹效果
安卓 API 21+ 使用 material design Ripple 在用户点击屏幕上可交互区域的时候为用户提供反馈。 React Native 利用TouchableNativeFeedback
组件 实现了这个功能。 使用这个触摸效果取代 opacity 或者 highlight 通常会让您的应用程序更加切合平台。 尽管如此, 还是需要注意这个组件在 IOS 平台上 或者在 Android API 小于21下无法工作的情况,所以你需要退而求其次,在IOS上使用其他的可触控组件,可以使用诸如 react-native-platform-touchable 的组件解决平台差异。