我将把我的第一个React Native应用程序部署到iOS应用程序商店。我有一个问题,但当谈到布局。我正在使用flexbox系统,目前正在为iPhone6设计。我已经完成了所有的模型和草图,并且拥有了我想要的所有外观。
然而,每当我试图在iPhone 4中运行该应用程序时,我都会遇到一个问题。我为iPhone 6实现的设计不符合iPhone 4拥有的约束。
我可以尝试为iPhone4重新设计东西,但是在iPhone6上东西变得太小/太丑了。我真的需要在所有屏幕分辨率上看起来都很棒的东西(即iPhone4-iPhone7 plus)。
我在网上看到过许多不同的解决方案:对每个样式表值应用一个常量,这取决于设备的纵横比;检查设备并根据您所在的设备呈现不同的组件;并更好地利用弹性框,以使布局具有响应性。
第一种解决方案似乎无法准确表示每种屏幕大小,第二种解决方案看起来只是为了设计样式而创建了过多的代码,而第三种解决方案则似乎没有考虑静态大小和字体大小。
我通常会开始遵循第三个解决方案,但有些东西不能简单地是容器的百分比(例如,按钮高度,字体大小,一些空白和填充等)。)
因此,我要问的问题是:在 React Native 中解决这个问题的最佳方法是什么?我真的需要一个彻底的事实答案,可以解释完成开发过程的最佳方式(例如,我是否应该设计为最小的屏幕尺寸,然后将其适合更大的尺寸?我应该为所有分辨率进行设计?等等)。
对于那些感受到我的痛苦并发现了一个很好的解决方案的人,请提前向我表示感谢,请让我知道这个解决方案是什么。
我已经阅读了关于 React Native 中关于响应式设计的有用博客。我没有时间尝试它,但我认为它会解决你的问题,让我知道它如何为你工作。
我感受到了你的痛苦,并选择了一个与你的第一个类似的解决方案,也类似于Shukarullah Shah提到的博客文章。在我的style.js
文件中,首先我使用获取设备宽度和高度;
const x = Dimensions.get('window').width;
const y = Dimensions.get('window').height;
然后我把每个维度,x
和y
,分成10,20和40。对于宽度,它变得像;
const widthS = x / 40; // ~10 px
const widthM = x / 20; // ~20 px
const widthL = x / 10; // ~40 px
然后我使用这些值来定义任何尺寸的边距、填充、图像尺寸等。我还为我拥有的每个组件使用一个通用的style.js
文件。这样我就可以一次定义这些常量,并且可以轻松地查看/比较我拥有的每一个样式。当然,你可以像博客文章中提到的那样改进这些定义。但是我是开发人员而不是设计师,所以我对完美比例不太敏感。
好了,我想我现在明白该怎么做了。看起来,在iOS中为多种屏幕尺寸进行设计的关键不一定是在更大的手机上做得更大,在更小的手机上做得更小,而是设计适合最小屏幕尺寸的产品,并让这些产品在更大的设备上看起来更小。
这种响应式设计背后的想法似乎是,拥有更大手机的人希望看到更多的内容,而不是放大的内容。因此,如果它适用于小型手机,它也可以适用于大型手机。
以按钮为例:如果40pt的按钮在iPhone 4s上看起来不错,那么它在iPhone 7 plus上也可以很好地工作。好处是iPhone 7 plus的用户能够看到更多内容,而不仅仅是一个更大的按钮。
这种设计也使其成为不需要多个屏幕尺寸的样式。
确定您所在设备的尺寸仍然有一定的作用,但这更重要的是确定您是否能够显示更多内容(例如,在iPhone 5和iPhone 6的情况下,是否显示额外的选项卡按钮),以及布局(例如,我应该将菜单放在哪里)。
您可以在大多数非常流行的Web应用程序本机应用程序上看到这种类型的设计。
图像和视频是唯一的例外之一。每当设备和设计需要时,自动增长图像似乎是有帮助的。幸运的是,通过使用flexbox和响应式技术,这非常简单,就像react-本机所包含的那样。
我希望这能帮助其他人并节省他们一些时间。注意:这并没有提供风景与肖像的问题。在那种情况下,最好使用某种不同的风格。
当我在模拟器(pixel Android10)中运行我的react原生应用程序时,我注意到当手机设置为暗模式时,应用程序将白色背景改为黑色。这使得很难阅读黑色文本或其他任何东西。有没有一种方法可以强迫应用程序在轻主题下运行,尽管操作系统处于暗模式或轻模式
响应式布局 多屏的环境让我们不得不考虑网络内容在各个尺寸中的表现, 均可正常访问和极佳的用户体验。 响应式布局可以更具屏幕尺子的大小对内容和布局做出适当的调成, 从而提供更好的用户感受。也是因为响应式布局的出现, 开发者也无需对不同尺寸设备而特殊定制不同的页面, 这大大降低了开发成本和缩短了开发时间。 这样的方法也同样存在着缺点。 缺点是同样的资源被加载,但因为展示平台所限并不能全部显示。 Vie
主要内容:设置 meta 标签,媒体查询CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本。这个概念是为解决移动端浏览网页而诞生的。响应式布局能够为使用不同终端的用户提供很好的用户体验,而且随着大屏智能手机的普及,用“大势所趋”来形容也不为过。 要实现响应式布局,常用的方式有以下几种: 使用 C
自从进入移动互联网时代,响应式布局这个词经常出现在 Web 设计和开发领域,它让 Web 页面在不同尺寸的设备上都具有良好的浏览体验。 开始之前 在讲解响应式布局之前,需要先了解一下基础知识,只有对它们都有一定的了解,才能在做响应式布局时选取合适的技术方案。 像素 像素这个单位很常见,指的是图像中最小的单位,一个不可再分割的点,在计算机屏幕上一般指屏幕上的一个光点。例如常见的描述中 iPhone
我最近下载了Gridly wordpress主题(响应),并使用css媒体查询调整不同宽度的布局-1020px、610px、480px、320px。 在这里看到我的页面。 当我将窗口从1020px最小化到610px,从610px最小化到480px时,网格将平滑地重新排列。当我从480px切换到320px时,“问题”就出现了,因为在弹出的特色图片缩略图下面似乎有一个额外的空间,这导致了一个帖子图片和
我们已经将原生IOS和Android应用程序发布到商店。目前即将完成 react-native 版本以取代本机应用程序。React-native 应用程序使用与本机相同的 firebase 项目。Firebase 身份验证适用于原生应用和 React-原生Android应用。在 react-native ios 上,我们无法使用 google 登录。 错误日志: 发生内部错误,请重试。Native