时间戳

首页 > 解决方案 > React Native - 翻译来自 Zeplin 的 UI 设计和不同设备的布局

android - React Native - 翻译来自 Zeplin 的 UI 设计和不同设备的布局

问题描述

我是 react-native 开发的菜鸟，目前正在尝试使用登录、注册和一些入职表格构建应用程序。

我已经从我们的 UI 设计师那里得到了 Zeplin 形式的 UI 设计。现在我有了那个文件，UI/UX 设计师正在使用固定坐标位置将组件放置在布局中。但是，我正在尝试使用 flex 进行布局，以便它可以正确适应不同的屏幕尺寸。下面是界面截图

登录页面

个人资料页

我的问题是

  1. 您通常如何翻译 UI 设计以匹配您的应用程序？
  2. 在查看此案例时，您将如何对组件进行分组？（例如：徽标、“login akun”和 lorem ipsum 在 1 个视图中，而文本输入和登录按钮在另一个视图中，等等）
  3. 考虑到此应用程序将在包括 iOS 在内的许多不同类型的设备中使用，我是否必须遵循任何准则或一组原则以确保应用程序正确且按比例显示在所有设备中？
  4. 使用固定高度视图进行布局是个好主意吗？
  5. 当我尝试使用视图进行布局时，显示键盘时布局很好。但是在另一台屏幕较小的设备上，当键盘显示时，组件会以某种方式相互重叠。我怎样才能避免这个问题？

非常感谢&期待开导！

标签： androidiosreact-nativelayout

解决方案

推荐阅读