Improving User Experience

为移动平台构建应用程序是微不足道的，但有许多来自网络背景的开发人员通常不会考虑的细节。本指南旨在解释其中的一些细微差别，并说明如何将它们归入您的应用程序。

我们正在改进并在此页面添加更多详细信息。如果你想帮忙，请在react-native / 14979上打个招呼。

主题索引

• 配置文本输入

• 当键盘可见时管理布局

• 使可点击的区域更大

• 使用Android Ripple

• 学到更多

配置文本输入

在触控手机上输入文字是一个挑战 - 小屏幕，软件键盘。但是根据您需要的数据类型，您可以通过正确配置文本输入来简化它：

• 自动对焦第一个字段

• 使用占位符文本作为预期数据格式的示例

• 启用或禁用自动资产化和自动更正

• 选择键盘类型（例如电子邮件，数字）

• 确保返回按钮关注下一个字段或提交表单

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

在手机上试用

当键盘可见时管理布局

软件键盘几乎占据了屏幕的一半。如果您的交互式元素可以通过键盘覆盖，请确保它们仍然可以使用KeyboardAvoidingView（请参阅文档）。

在手机上试用

使可点击的区域更大

在手机上按下按钮时很难精确。确保所有互动元素都是44x44或更大。一种方法是为元素留出足够的空间padding，minWidth并且minHeight样式值可以用于此。或者，您可以使用hitSlopprop来增加交互区域而不影响布局。这里有一个演示：

在手机上试用

使用Android Ripple

Android API 21+使用材质设计涟漪为用户提供反馈，当他们触摸屏幕上的可互动区域时。React Native通过TouchableNativeFeedback组件公开了这一点。使用这种可触摸的效果而不是不透明或高亮显示会使您的应用在平台上感觉更适合。也就是说，使用它时需要小心，因为它不适用于iOS或Android API <21，所以您需要后退使用iOS上的其他触摸组件之一。您可以使用像react-native-platform-touchable这样的库来处理您的平台差异。

Try it on your phone

材料设计和人机界面指南是学习更多关于移动平台设计的重要资源。