昨天凌晨,苹果公司发布了带刘海的 iPhone X,这需要 iOS 开发者针对其屏幕做新的适配,会后苹果公司发布了 iPhone X 的适配指南,下面是翻译稿,供大家参考。...iPhone X iPhone X 拥有一个宽大的而且高分辨率的屏幕,从外观看是圆角的,并且扩展到屏幕的边缘。这提供了前所未有的沉浸式体验,可以使我们体验更加丰富的内容。 ?...大多数使用系统提供的标准 UI 元素(如导航栏、表格和集合)的应用程序能够自适应设备的新外形。背景材料可以延伸到屏幕的边缘,而且 UI 元件也能够被适当地插入和定位。 ? ?...提供全屏体验。要确保背景延伸到屏幕的边缘,并且垂直可滚动的布局(例如表格或集合)能够一直延续到底部。 ? 插入必要内容以防止裁剪。...所有的应用程序都应遵循 UIKit 中定义的安全区域和布局边距,这些区域可以根据设备和上下文进行适当的填充。安全区域还能够防止内容把状态栏、导航栏、工具栏和标签栏覆盖掉。 注意状态栏的高度。
React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。...React Native 状态栏组件 StatusBar 状态栏 StatusBar 就是手机屏幕最顶上一个区域,包含 运营商名称、网络情况、电池情况那一条。...暗色系 亮色系 在 React Native 中我们可以定制 状态栏 StatusBar 。当然了,说是定制,无非以下几点 显示或隐藏状态栏。 设置主题色:亮色系还是暗色系。... 静态方法 除了可以使用属性来设置状态栏外,React Native 中的 StatusBar 还提供了一些静态方法用来设置状态栏。...那是因为的实体机是全屏手机,顶部的中央有一个 摄像头。
吐槽 如果React-Native是个人,我估计已经想要打死他了。。。...上一篇文章 当React开发者初次走进React-Native的世界 前言 最近因为业务需要,做了一些关于React-Native方面的开发,对一些自己遇到的问题做了记录。...ScrollView组件 4.Web中我们使用click处理点击事件,在RN中要用Touchable组件的onPress事件 5.对于导航,我们可以使用React-Navigation。...其中导航我们有两种写法,一种是单纯写成React的props函数调用的风格,另外一种是写成Redux的风格,就是通过dispatch/action的风格,使用Redux风格,是因为少部分场景可能会用到全局导航状态共享的需求...,对于多数简单的需求,我觉得写成React的风格就好了,因为简单易用 6.对于切换类tabs,我们也许可以试试使用react-native-scrollable-tab-view 但有一点非常遗憾:这个组件对下划线的支持程度仍然无法满足普遍的业务需求
比如,我们在使用StatusBar做导航栏的时候,在iOS平台下根视图的位置默认情况下是占据状态栏的位置的,我们通常希望状态栏下面能显示一个导航栏,所以我们需要为StatusBar的外部容器设置一个高度...组件选择 React Native发展到现在已经有相当丰富的组件来供开发者使用,那么从适配Android和iOS平台的角度如何甄选这些组件呢?...比如,我们要开发一款应用需要用到导航组件,在React Native组件中有NavigatorIOS与Navigator两个导航组件来供我们选择,从api doc中我们可以看出NavigatorIOS只支持...为此我们需要为每个图标提供1x、2x、3x三种大小的尺寸,React Native会根据屏幕的分辨率来动态的选择显示不同尺寸的图片。...从大多说采用React Native开发应用的开发者的反馈来看,React Native的性能是远大于WebView但略低于原生应用,毕竟React Native和原生语言之间还需要一个Bridge。
React-Native RN的作用 跨平台:可以为IOS/Android,甚至Windows Phone开发原生应用 相对良好的UI体验,平衡开发成本和用户体验后相对合理的选择 RN的本质...异步:线程之间,例如JS线程和UI线程,以异步的方式进行通信,这样它们就不会互相阻塞了 批处理: 以优化的方式, 把消息从一个线程传递到另外一个线程 序列化: 两个线程不会操作或者共享同一块数据...RN的Web化:react-native-web react-native-web 组件的内部,会把 React Native 的 API 映射成了浏览器支持的 API。.../Web的三端构建 参考文章 React Native转web方案:react-native-web 使用react-native-web将你的react-native应用H5化(一) https...://www.codementor.io/saketkumar95/how-react-native-works-mhjo4k6f3 How React Native constructs app
这个窗体由下图(带序号标签)的几块区域组成。 ? 菜单和工具栏:主菜单和工具使你可以操作各种各样丰富的命令。...导航栏:帮你导航项目和打开那些你想编辑的文件 状态栏:标示项目、整个IDE的状态,以及展示警告信息。 编辑器:这里是你可创建和更改你的代码。...所有的菜单和工具栏按钮事件描述都会展示在状态栏的左侧。 如果你想执行某个事件,但是你不知道它在哪,可以通过ctrl+shift+a,根据事件的名字进行搜索,然后从建议列表中选择对应的事件即可执行。...折叠展开导航栏 展示导航栏,可以从下面的方式中选择一种: 从view菜单,选择NavigationBar 按键alt+home 隐藏导航栏: 从view菜单,清除NavigationBar ##提示和技巧...全屏模式 此模式下允许你在全屏模式编码。该模式下移除了所有的菜单,不过你可以使用语境菜单和快捷键。当你将鼠标移动到屏幕顶部时,主菜单将变得可用。
一、微组件的封装 每个页面的导航都会有不同的样式或者图片,为了实现代码的复用性,可以将导航统一封装成一个微小组件。 封装的Item需要有可点击事件,需要显示文字和图片。...,会用到全屏,因此可以把全屏幕的尺寸也封装起来。...20 : 0) //iOS平台状态栏默认为0,安卓平台默认为20 } 二、首页封装 1) 首页导航的实现 同样也是在navigationOptions调用箭头函数。返回标题、图片。...上图是从API中的recommend的url解析出来的json数据。...,导航会跳转到详情页面,那么就要把要跳转页面的名称传入到navigate中。
导航采用 公司推荐的react-navigation,滚动条采用第三方组件react-native-scroll-tab-view。RN环境为0.50。 (先声明!!是在网上某位大神的博客上学习哒。...,实现Tab标签栏框架 引入实现导航的组件 要想让react-naviation组件发挥作用必定要引入它的子组件。...因为四个主页面都添加在Tab标签栏当中,所以只要将Tab加入到导航作为显示页面。...四、状态栏的设置 从原型图上可以看出,只有当页面跳转在’首页‘和’我的‘两个页面时,状态栏的样式是亮色,其余时候都呈现了黑色。...要设置状态栏必须先导入StateBar组件 import { StatusBar } from 'react-native' 构造函数中,先将所有页面状态栏的状态都设置为亮色。
Android 中的 DrawerLayout 就是一个抽屉导航组件,所以这个组件的功能当然也是一样的。...我们的这个抽屉导航视图一开始是看不见的,就像抽屉一样,你不拉开抽屉你看不到东西,所以导航视图可以从drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定...settling(停靠中),表示用户刚刚结束与导航条的交互,导航条正在结束打开或者关闭的动画。...renderNavigationView 该方法用于渲染一个可以从屏幕一边拖入的导航视图 statusBarBackgroundColor color 使抽屉导航覆盖整个屏幕,并绘制状态栏的背景,使其能够在覆盖到状态栏..., TouchableOpacity, Image, View } from 'react-native'; export default class DrawerLayoutDemo extends
概述 在过去的一年中React Native经历了从v0.40到v0.52的十几次的版本迭代,我们看到在这十几次的版本迭代中React Native的组件库在不断地壮大,在新引进的组件中既有FlatList...、SectionList等具有更高性能的列表组件,也有与时俱进的用于适配全屏幕的SafeAreaView组件,同时呢,一些性能较差、无法适应React Native未来发展的一些老的组件,如:ListView...通过本文希望能帮助你快速的了解React Native在过去一年中的重要更新,如何让你的APP去更快的应用React Native新的特性,让React Native新的组件及特性来提高你应用的性能与体验...SwipeableFlatList 0.50 一个带滑动显示更多菜单的FlatList组件; SectionList 0.43 基于VirtualizedList的高性能分组(section)列表组件。...使用react-navigation代替; 以上便是同时React Native 2017-2018的年度报告,另外你也可以通过学习《React Native实战课程》来获得React Native
全面屏幕体验 我使用 "边到边" (edge-to-edge) 一词来描述那种将内容铺满整个屏幕,以实现更沉浸视觉体验的应用。默认情况下,应用内容的绘制范围从顶部状态栏下方开始,延伸至底部导航栏上方。...(状态栏和导航栏统称为系统栏) ? 实现从边到边的全面屏体验后,系统栏会覆盖在应用内容前方。应用也得以通过更大幅面的内容为用户带来更具有冲击力的体验。...使用 Android 10 以下设备的用户同样能获得更加沉浸的体验。我们将它设置为可选,仅仅是为了最大程度地减少开发者的工作量和测试量。 在状态栏后面绘制内容 接下来,我们来看看屏幕顶部的状态栏。...只要您的内容和布局允许,我们建议尽量把内容也拓展到状态栏的后方。...再强调一次: 是否扩展应用内容的绘制区域完全取决于开发者,是可选的。 如何实现 想实现 "边到边" 全面屏体验分三步: 1. 请求进行全屏布局 第一步是让系统将我们应用布局扩展至系统栏后方。
海岛奇兵的这种模式就是典型的沉浸式模式,它的整个屏幕中显示都是游戏的内容,没有状态栏也没有导航栏,用户玩游戏的时候就可以完全沉浸在游戏当中,而不会被一些系统的界面元素所打扰。...隐藏导航栏 现在我们已经成功实现隐藏状态栏的效果了,不过屏幕下方的导航栏还比较刺眼,接下来我们就学习一下如何将导航栏也进行隐藏。...这次看上去好像终于是完全全屏化了,但其实上这离真正的沉浸式模式还差得比较远,因为在这种模式下,我们触摸屏幕的任意位置都会退出全屏。 ? 这显然不是我们想要的效果,因此这种模式的使用场景比较有限。...而当我们需要用到状态栏或导航栏时,只需要在屏幕顶部向下拉,或者在屏幕右侧向左拉,状态栏和导航栏就会显示出来,此时界面上任何元素的显示或大小都不会受影响。...过一段时间后如果没有任何操作,状态栏和导航栏又会自动隐藏起来,重新回到全屏状态。 这就是最标准的沉浸式模式。
如果你认为没有到当前屏幕的完整路径,因此导致用户迷路,那么可以调整APP的层次结构,使其更加扁平。 给带有标题的按钮留出足够的空间。...例如,“邮件”使用更简洁的术语(例如“标记”和“草稿”)从每个邮箱的标题中省略了“消息”一词。 不要在侧边栏中显示超过两个层次的层次结构。...四、状态栏(Status Bars) 状态栏出现在屏幕的上边缘,并显示有关设备当前状态的有用信息,例如时间,移动电话和电池电量。状态栏中显示的实际信息取决于设备和系统配置。 使用系统提供的状态栏。...显示全屏媒体时,请考虑暂时隐藏状态栏。...通常,在iPhone上使用三到五个标签;如果需要,在iPad上可以接受更多一些。 当人们导航到您应用中的其他区域时,请不要隐藏标签栏。标签栏可为您的应用启用全局导航,因此它在任何地方都应保持可见。
地址 CSDN 地址:http://blog.csdn.net/xiangyong_1521/article/details/51333437 工作中的一个需求,需要监控并动态控制到SystemUi(状态栏...:显示状态栏,Activity不全屏显示(恢复到有状态的正常情况)。...View.INVISIBLE:隐藏状态栏,同时Activity会伸展全屏显示。View.SYSTEMUIFLAGFULLSCREEN:Activity全屏显示,且状态栏被隐藏覆盖掉。...方法,这两个方法实现对状态栏的动态显示或隐藏的操作,以及获取状态栏当前可见性。...,Activity不全屏显示(恢复到有状态的正常情况) mRLayout.setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE)
全面屏幕体验 我使用 "边到边" (edge-to-edge) 一词来描述那种将内容铺满整个屏幕,以实现更沉浸视觉体验的应用。默认情况下,应用内容的绘制范围从顶部状态栏下方开始,延伸至底部导航栏上方。...(状态栏和导航栏统称为系统栏) 实现从边到边的全面屏体验后,系统栏会覆盖在应用内容前方。应用也得以通过更大幅面的内容为用户带来更具有冲击力的体验。...使用 Android 10 以下设备的用户同样能获得更加沉浸的体验。我们将它设置为可选,仅仅是为了最大程度地减少开发者的工作量和测试量。 在状态栏后面绘制内容 接下来,我们来看看屏幕顶部的状态栏。...只要您的内容和布局允许,我们建议尽量把内容也拓展到状态栏的后方。...再强调一次: 是否扩展应用内容的绘制区域完全取决于开发者,是可选的。 如何实现 想实现 "边到边" 全面屏体验分三步: 1. 请求进行全屏布局 第一步是让系统将我们应用布局扩展至系统栏后方。
项目源码:react-native-splash-screen 问题描述: 用React Native架构的无论是Android APP还是iOS APP,在启动时都出现白屏现象,时间大概1~3s(根据手机或模拟器的性能不同而不同...我在《React Native Android启动屏,启动白屏,闪现白屏》一文中介绍过一种为React Native Android应用添加启动屏的方法, 不过那种方法虽好,但牵扯到对React Native...在《React Native Android启动屏,启动白屏,闪现白屏》一文中 我们使用的是在根视图容器上添加一个视图作为启动屏,当js bundle加载并渲染完成后,再将添加的视图从根视图上移除。...上述代码中,show的第二个参数fullScreen表示启动屏是全屏显示(即是否隐藏状态栏),代码会控制对话框加载不同的主题样式R.style.SplashScreen_Fullscreen与R.style.SplashScreen_SplashTheme...开源库 为了方便大家使用和解决React Native应用启动白屏的问题,我已经将上述方案做成React Native组件react-native-splash-screen, 开源在了GitHub上,
所以这种是叫做 状态栏透明模式 设置透明状态栏 先来几组效果图,从效果 1 开始逐渐递进演示,这里面的几个重要参数会在后面具体说明,这里先说明现象 1.内容布局全屏 在 Android 4.1 以上设置去除状态栏或者认为是状态栏被内容布局遮挡了...screnn_stable.png 5.沉浸模式 // 所谓沉浸模式就是一开始我们的 UI 布局是全屏的,状态栏和虚拟导航键也是隐藏的,当我们需要的系统 UI 的时候,从状态栏的位置下拉就可以出现系统...,全屏显示,状态栏消失,下拉的时候,状态栏依然会出现,并且不再消失。...UI 布局可以延伸到导航栏,导航栏悬浮会遮挡住我们的 UI 布局。...View.SYSTEM_UI_FLAG_HIDE_NAVIGATION:作用使 UI 布局延伸到导航栏,全屏显示,导航栏消失。
Android 沉浸式全屏 Android 4.4 带来了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏、 虚拟按键动态隐藏, 应用可 以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种..., 应用可以占据屏幕的全部空间, 当用户触摸屏幕的任何部分时, 会自动退出全屏模 式, 这种模式比较适用于视频播放器类应用。..., 只有当用户从屏幕的上方边沿处向下划动时, 才会退出沉浸 模式, 用户触摸屏幕其它部分是, 不会退出该模式, 这种模式比较适用于阅读器、 杂志类应用。...| SystemUiFlags.ImmersiveSticky; Window.DecorView.SystemUiVisibility = uiOpts; 在黏性沉浸模式下, 应用使用屏幕的全部空间..., 当用户从屏幕的上方边沿处向下滑动时, 也不会退出该 模式, 但是系统界面 (状态栏、 导航栏) 将会以半透明的效果浮现在应用视图之上 (如下图所示), 只有当用户点击系统界面上的控件时, 才会退出黏性沉浸模式
Surface图 第一个XXXXActivity,大小是屏幕大小 第二个状态栏StatusBar,大小对应顶部那一条 第三个是底部虚拟导航栏NavigationBar,大小对应底部那一条 HWC_FRAMEBUFFER_TARGET...实际应用中经常将状态栏或者导航栏设置为透明色:即想要沉浸式体验,这个时候背景颜色View就不在被绘制,但是,默认样式下DecorView的内容绘制区域并未扩展到状态栏、或者导航栏下面(TRANSLUCENT...DecorView级别的WindowInsets消费 默认样式Activity的状态栏是有颜色的,如果内容直接扩展到状态栏下方,一定会被覆盖掉,系统默认的实现是在DecorView的根布局上加了个padding...仅仅设置隐藏导航栏 上图中由于设置了SYSTEM_UI_FLAG_HIDE_NAVIGATION,所以没有导航栏View被添加,DecorView中只有状态栏背景(1)View与根内容布局,从图中的点2...用户布局级别的fitSystemWindow消费 假设图片浏览的场景:全屏,导航栏与状态栏透明,图片浏览区伸展到整个屏幕,通过设置下面的配置就能达到效果:全屏,并且用户布局与系统布局都不消费WindowInsets
领取专属 10元无门槛券
手把手带您无忧上云