首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React Native 导航:深入研究导航库

React Navigation的优点在于其声明式API,使其深受希望拥有易于理解的导航系统的开发者的喜爱。React Native Navigation是如何工作的让我们稍微深入一点,谈谈架构。...您有一些称为导航器的东西 - 将它们视为您应用程序导航的架构师。它们定义了用户如何从一个屏幕移动到另一个屏幕。...React Native Navigation的酷炫功能堆栈导航器:这个导航器像专业人士一样处理导航历史。它使用基于堆栈的方法,允许用户在屏幕之间轻松地来回切换。...抽屉导航器:为了增加一丝优雅感,React Navigation引入了抽屉导航器。这就像在侧边有一个秘密滑动抽屉,提供额外的导航选项。时尚,对吧?...我正在参与2023腾讯技术创作特训营第五期有奖征文,快来和我瓜分大奖!

21000

Android Q 手势导航背后的故事

未来,手势设计将何去何从,对于这个问题仍有许多地方值得进一步研究,但是我们希望本文能够提供一些洞见,让您对手势导航的开发设计流程有一个初步认知,同时了解我们是如何平衡开发者和 OEM 生态圈伙伴之间的关系的...当然,手势导航也并非十全十美,它也面临着许多亟待解决的问题: 不是所有用户都习惯使用手势导航 手势导航学习难度大,用户需要一定的适应时间 系统手势可能与应用手势存在冲突 然而,以上三点还不算是最严峻的挑战...因此,我们的设计目标之一就是确保返回手势符合人体工程学,具备高度可靠性且直观易用,并且在安排开发工作时,适当地调低应用抽屉、最近使用等低频导航操作的优先等级,首要考虑返回手势的需求。...除了应用抽屉以外,适应时间也是一大问题: 用户平均需要 1 到 3 天才能适应手势导航,特别是,用户有些难以应付像左滑或者右滑跑马灯控件时却触发返回这样的情况。...为了更好地支持手势导航,请你务必认真对待以下三方面的开发工作: 按照边到边的设计理念,真正实现应用的全屏体验 妥善处理与系统用户界面的视觉重叠部分 (例如: 导航栏) 解决与系统手势冲突的应用手势 我们最近刚发布了第一篇

2.2K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    导航设计的10种模式

    导航设计的目的就是需要突出产品的核心,扁平化用户的任务路径。让用户能够顺利的在产品中畅行,让用户时刻清楚自己在应用中所处的位置,及如何前往目的页面。...优点: 可见性好,位置明显,易于发现,它能让用户直观了解到APP的核心功能; 操作性好,用户很方便就能触及到这个区域,并可在几个标签中快速切换且不会迷失方向,简单而高效; 符合习惯、ios原生控件,开发简单...02 顶部标签导航 描述: 顶部Tab是谷歌提出来的,为了区分与iOS的区别的一种导航模式,由于在顶部,手指难以触及,所以谷歌对应地提出了手势操作的解决方法:通过在屏幕左右滑动来切换标签。...07 下拉式/菜单导航 描述: 与抽屉式导航的目的相同,都是为了突出内容。...10 组合式 描述: 一个网站或者APP内不可能只用一种导航,通常都是组合来使用。在不同使用场景下根据实际需要进行选择。但是通常主导航会对这个产品的格调起决定性作用。

    3.6K40

    彻底搞懂HashMap(上)

    ; } 当我在放元素的时候,我就拿着编号的苹果去 % 一下抽屉的长度,那只要你了解%的含义,你就一定知道的意思,我现在就按照得出的这个index 的值放在对应的抽屉里边,找的时候,我也按照这个算法算出来...解释二:什么是完美哈希,什么是哈希冲突,以及如何解决哈希冲突 相信通过上边那个故事,有同学一定想到了这样的问题,我们有10 个抽屉,但是我们有11个苹果,那么我们一定会有一个苹果找不到地方放进去,这个时候呢...,这个咱们后边再聊 三、map中的哈希算法是怎么回事 前言 我们都知道链表他的遍历效率是很低的,而形成哈希冲突之后,他就得慢慢去遍历链表,效率贼低,所以我们不希望发生哈希冲突,于是我们就得把咱们的哈希算法设计的精妙一些...为什么要用& 问题一为啥要用&、 你有没有想过,万一我通过 一个所谓的哈希算法算出来的index它的值并不在数组索引里,比如,我有10个抽屉的位置,我通过哈希算法算出来的index 是101,那这个元素都跑到天边去了...那&的特性 同1 得1 ,就完全能够解决这个问题 看一下的这个式子 1010 1010 0100 0101 式子1 0111 1111 式子2 ---- 0100 0101 如果式子2 固定,那么如果按照同一得

    36500

    彻底搞懂HashMap(上)

    ; } 当我在放元素的时候,我就拿着编号的苹果去 % 一下抽屉的长度,那只要你了解%的含义,你就一定知道的意思,我现在就按照得出的这个index 的值放在对应的抽屉里边,找的时候,我也按照这个算法算出来...解释二:什么是完美哈希,什么是哈希冲突,以及如何解决哈希冲突 相信通过上边那个故事,有同学一定想到了这样的问题,我们有10 个抽屉,但是我们有11个苹果,那么我们一定会有一个苹果找不到地方放进去,这个时候呢...,这个咱们后边再聊 三、map中的哈希算法是怎么回事 前言 我们都知道链表他的遍历效率是很低的,而形成哈希冲突之后,他就得慢慢去遍历链表,效率贼低,所以我们不希望发生哈希冲突,于是我们就得把咱们的哈希算法设计的精妙一些...为什么要用& 问题一为啥要用&、 你有没有想过,万一我通过 一个所谓的哈希算法算出来的index它的值并不在数组索引里,比如,我有10个抽屉的位置,我通过哈希算法算出来的index 是101,那这个元素都跑到天边去了...那&的特性 同1 得1 ,就完全能够解决这个问题 看一下的这个式子 1010 1010 0100 0101 式子1 0111 1111 式子2 ---- 0100 0101 如果式子2 固定,那么如果按照同一得

    29940

    TAB导航与侧边抽屉导航的巅峰对决

    目前,侧导航在安卓设备上比较流行,而iOS平台上使用的还不是很普遍。所以我们的讨论还要面对一个问题:安卓和iOS应用是不是有一样的用户习惯,适用一样的导航模式?...我想,在这里分享下我们的经验是很有价值的。 可用性 vs. 干净的设计 ? 当第一次开始zeekbox项目,我们使用了顶部的tab导航。我们的理由很简单“看不到的不记挂”。...为了让更多的内容展现在这个页面里,我们又想到了尝试侧导航。基于之前的经历,这一次,我们决定使用一种更聪明的办法,A/B test去测试。...我们招募了喜欢看电视节目的用户,每周两次过来我们的工作室,测试不同的概念和我们设计的原型。在一些情况下,我们可以通过小样本用户测试选择方案,就像上面提到的对于“我的TV”页面的原型测试。...facebook一定也在使用A/B test测试用户对抽屉导航和tab的不同反应,我很期待facebook对这一测试的最终结果。 ?

    2.8K70

    Android开发之DrawerLayout实现抽屉效果

    谷歌官方推出了一种侧滑菜单的实现方式(抽屉效果),即 DrawerLayout,这个类是在Support Library里的,需要加上android-support-v4.jar这个包。...抽屉菜单的宽度应该不超过320dp,这样用户可以在菜单打开的时候看到部分内容界面。...由于Google的demo是一个ListView,所以ListView会获得焦点,事件就不会传递了,看不出来问题。但是如果用的include加载的布局,会出现这个情况,那么如何解决?...解决办法:在include进的那个布局里面,添加clickable=true 2、除了抽屉的布局视图之外的视图究竟放哪里 左、右抽屉和中间内容视图默认是不显示的,其他布局视图都会直接显示出来,但是需要将其放在...drawerLayout.setScrimColor(Color.TRANSPARENT); 4、如何填充抽屉的划出后与屏幕边缘之间的内容(即上面的灰色部分)?

    7.2K60

    Android Q Beta 迎来第五版

    手势导航更新 此前在 I/O 开发者大会上,我们已经公布了团队在手势导航方面的一些工作动向。目前,我们正在和几大设备厂商展开密切合作,以确保用户和开发者均能享用到标准化的 Android 手势导航。...另外,我们还为包含导航抽屉的应用引入了 peek 手势: 用户轻压屏幕边缘来 “抓住” 抽屉,然后向内滑动,便可拉出抽屉页面。...此外,自定义启动器也是开发者反馈比较多的一个话题,我们正在抓紧解决相关问题,尤其是稳定性和 “最近使用” 页面这两个方面的问题。...从 Android Beta 6 开始,当用户使用自定义启动器时,系统会默认切换至三按钮导航。我们将在之后的更新中解决余下问题,确保所有用户都能正常使用手势导航。...更丰富的录音体验: 如需支持字幕生成或游戏录制,请启用音频回放获取功能——这能让您的应用惠及更多用户,并更好地支持无障碍体验。

    1K20

    深入浅出 NavigationUI | MAD Skills

    在本文中,我们将为大家讲解另外一个用例,即类似操作栏 (Action Bar)、底部标签栏或者抽屉型导航栏之类的 UI 组件如何在应用中实现导航功能。...我需要在应用中增加一些页面,所以有必要使用抽屉式导航栏或者底部标签栏来辅助用户导航。但是我们该如何使用这些 UI 组件来集成导航功能呢?通过点击监听器手动触发导航动作吗? 不需要!无需任何监听器。...△ 标题更新了并且也显示了返回按钮 底部标签栏 目前为止还算顺利,但是应用还不能导航到 coffeeList Fragment。接下来我们将解决这个问题。 我们从添加底部标签栏入手。...抽屉式导航栏 虽然看上去不错,但是如果您设备的屏幕尺寸较大,那么底部标签栏恐怕无法提供最佳的用户体验。...要解决这个问题,我会使用另外一个布局文件,它带有 w960dp 限定符,表明它适用于屏幕更大、更宽的设备。

    3K30

    DARPA与艾伦AI研究所合作,致力于研究AI对常识的理解

    DARPA 正在与总部位于西雅图的艾伦AI研究所合作,以了解如何改变它。 机器常识计划旨在定义问题并在其上产生进展,尽管没有人期望在一两年内解决这个问题。...这包括对象领域(直观物理),地方(空间导航)和智能体(有目的性的演员)。 但是如何测试这些东西呢?...幸运的是,几十年来,伟大的思想家一直致力于解决这个问题,一个研究小组提出了一种测试常识的初步方法,这种方法应该成为更复杂的常识的垫脚石。...艾伦AI研究所一直致力于常识,现在已经开展了很多其他有关现实世界理解和导航的项目。 艾伦AI研究所的负责人Oren Etzioni表示,“其中一个问题是如何将其置于经验基础之上。...这些问题有113000个,但Etzioni告诉我这只是几个中的第一个数据集。 “这个特定的数据集并不那么难,”他说,“我希望看到快速的进展。但到今年年底,我们将要推出至少四个更难的东西。”

    44560

    App之底部导航栏的设计

    hi,这是系列文章:App之xxx的第2篇,第1篇我总结了App之“文字”的设计技巧。今天来总结下app的底部导航栏的设计。 我为什么写这个系列的文章。...在工作之余,我决定把所研究的内容写成关于app之xxx的系列文章,文章选择的题材会往“小而精”这个方向努力,范围在我的工作内容中选取。...先来看看app常用的导航模式有哪些:列表式、网格式、标签导航、抽屉式导航等。...那么,有没有一种方式应用在一级页面,可以集合这些优点: 列表式的结构清晰明了, 网格式的紧凑、直观, 标签式底部导航的便利拇指操作, 抽屉式容纳更多选项,简洁界面。...这里把抽屉式的汉堡包按钮,变成了“更多",我们可以把一些不常用的功能全部收纳到这里。 3、然后其中居中的一个按钮可以展开更多的选项,把底部导航栏变成网格式或者列表式的导航模式。

    4.9K110

    学会精准提问,比解决问题更重要

    但这样的方法进入社会工作后就会没用,因为很多工作任务是没有标准答案的,有时候可能连遇到的问题都会说不清楚。 爱因斯坦曾经说过: 提出一个问题往往比解决一个问题更重要。...那如何才能提出精确的问题呢? 刘润老师曾分享了一种“打开七个问题抽屉”的提问法,可高效、精准地挖掘出问题库中的宝藏。 01 继续/中止性问题 这是不是我们现在要讨论的问题?谁关心这个问题?...你或我是否需要参加这个讨论?还有谁需要参加这个讨论?讨论的重点是什么? 这个抽屉里的问题,其实都是在问:我们是否需要讨论这个问题? 02 澄清性问题 XXX是指什么?...这个抽屉里的问题,其实都是在问:你的前提假设是什么? 04 质疑性问题 你怎么知道的?你从哪里听说的?此人的可信度如何?是否有数据支持?数据是否可靠?有哪些可选项?在什么范围内?谁来做?...这个抽屉里的问题,其实都是在问:会带来什么影响? 07 行动性问题 我们应该做什么?怎样应付?与谁合作?什么时间完成?这是不是意味着解决了根源问题?是否全面?是否有应对风险的策略?是否有支援?

    1.3K20

    导航组件概览 | MAD Skills

    概览 本文会简要概述导航组件,包括如何创建一个带有导航能力的、已启用导航的 UI 中有关包含层级的细节的新应用,以及对于一些主要 API 和导航组件工作原理的解释。...操作 (action) 定义了可能的导航,但其不指定导航发生的时间,该逻辑存在于您的代码中。...我发现,观察 UI 中的各个部分在包含层级中的相互关系对于理解它们如何一起工作十分有帮助。为了查看这个部分,让我们来使用 Navigation Drawer Activity 模板创建另一个新工程。...另一个我想特别指出的是 NavigationView: ? 这个视图目前在左边屏幕外,它是一个 NavigationDrawer 并且其菜单选项被用来在目的地之间导航。...导航部件 我们已经在层级结构中查看了几个 UI 组件,以及它们彼此之间是如何关联的,接下来我想介绍一下几个重要部件,导航组件正是利用它们来在目的地之间实现导航。

    1.7K30

    李飞飞「具身智能」新成果!机器人接入大模型直接听懂人话,0预训练就能完成复杂指令

    而从这个过程我们可以看到,相比传统方法需要进行额外的预训练,这个方法用大模型指导机器人如何与环境进行交互,所以直接解决了机器人训练数据稀缺的问题。...VoxPoser要实现的就是优化每一个子任务,获得一系列机器人轨迹,最终最小化总的工作量和工作时间。...还是以开头的例子举,抽屉就是“吸引”的,花瓶是“排斥”的。 当然,这些值如何生成,就靠大语言模型的理解能力了。...,由于没有对象模型导致的信息不足可能让机器人无法执行这样的任务,但VoxPoser可以根据视觉反馈提出多步操作策略,即首先完全打开抽屉同时记录手柄位移,然后将其推回至中点就可以满足要求了。...机器人结合大模型可能正是解决这些问题的一个途径。 除李飞飞外,参与本次研究的还有清华姚班校友吴佳俊,博士毕业于MIT,现为斯坦福大学助理教授。

    80220

    reactvue 组件设计方法原则

    我集百家之长于一身,取其精华去其糟粕,将最精辟的原理和最完善的案例总结在了这里,供大家免费参阅。如有疑问请在下方留言或私信本人,我将第一时间为你解答。...为了让工程师们有更多的时间去考虑业务和产品迭代,我们不得不掌握高质量组件设计的思路和方法.所以笔者将花时间去总结各种业务场景下的组件的设计思路和方法,并用原生框架的语法去实现各种常用组件的开发,希望能让前端新手或者有一定工作经验的朋友能有所收获...一个抽屉(Drawer)组件会有如下需求点: 1>  能控制抽屉是否可见 2>  能手动配置抽屉的关闭按钮 3>  能控制抽屉的打开方向 4>  关闭抽屉时是否销毁里面的子元素(这个问题是5>  ...工作中频繁遇到的问题) 6>  指定 Drawer 挂载的 HTML 节点, 可以将抽屉挂载在任何元素上 7>  点击蒙层可以控制是否允许关闭抽屉 8>  能控制遮罩层的展示 9>  能自定义抽屉弹出层样式...展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有DOM标签和css样式 常常允许通过this.props.children

    2K30

    设计师才是最会搞恶作剧的人

    yuue工作室就把这种熟悉的“尴尬”化解成为乐趣。Oops! 系列灯具包括一款吊灯和一款工作灯,均沿袭了对产品互动性的探索。...——还有比这个更戏剧性的开场吗?...“我很好,不要你扶”桌 在库布里克所导演的经典科幻电影《2001:太空漫游》中,故事围绕着某个古老而未知的外星种族所布下地黑石板展开和发展,伦敦设计工作室 Duffy London 从中获得灵感,带来了名为...这个设计名为“Hole In The Floor”,实际定义为书柜,经典的抽屉外形,不仅有拉手,还有滑槽。...创意锁扣胶带X-tape 锁扣胶带X-tape,设计并不完全是为了解决问题或提供功能,有时这样的视觉错觉也能让平常物件带来使用上的乐趣和惊喜。 ----

    709110
    领券