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

反应原生,反应导航,我如何goBack()到前一个屏幕,而不是第一个屏幕,使用抽屉?

反应原生(React Native)是一种用于构建跨平台移动应用程序的开源框架。它允许开发人员使用JavaScript和React编写应用程序,并在iOS和Android等多个平台上运行。反应导航(React Navigation)是一个用于React Native应用程序的导航库,它提供了一套易于使用且高度可定制的导航组件。

要实现在使用抽屉(Drawer)导航时,从当前屏幕返回到前一个屏幕而不是第一个屏幕,可以使用以下方法:

  1. 使用react-navigation库中的goBack()函数:在当前屏幕的组件中,可以通过调用this.props.navigation.goBack()来返回到前一个屏幕。这将导航器返回到堆栈中的上一个屏幕。
  2. 使用react-navigation库中的pop()函数:在当前屏幕的组件中,可以通过调用this.props.navigation.pop()来返回到前一个屏幕。这将导航器从堆栈中弹出当前屏幕,并返回到上一个屏幕。
  3. 使用react-navigation库中的popToTop()函数:在当前屏幕的组件中,可以通过调用this.props.navigation.popToTop()来返回到堆栈中的第一个屏幕。这将导航器从堆栈中弹出所有屏幕,并返回到第一个屏幕。

抽屉导航是一种常见的导航模式,适用于具有侧边栏菜单的应用程序。它允许用户通过从屏幕边缘滑动或点击按钮来打开一个侧边栏菜单,从而访问其他屏幕或功能。

以下是一些腾讯云相关产品和产品介绍链接地址,可以用于开发和部署React Native应用程序:

  1. 云服务器(CVM):提供可扩展的虚拟服务器实例,用于托管应用程序和数据。产品介绍链接
  2. 云数据库MySQL版(CDB):提供高性能、可扩展的关系型数据库服务,用于存储和管理应用程序的数据。产品介绍链接
  3. 云存储(COS):提供安全、可靠的对象存储服务,用于存储和管理应用程序的静态资源和媒体文件。产品介绍链接

请注意,以上链接仅供参考,具体的产品选择应根据实际需求和项目要求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

react-navigation导航

补白 概念 在开始学习导航器之前,我们需要了了解两个和导航有关的概念: Screen navigation prop(屏幕导航属性):通过navigation可以完成屏幕之间的调度操作,例如打开另一个屏幕...基本使用(重点) 这里使用堆栈导航。 createStackNavigator 提供APP屏幕之间切换的能⼒,它是以栈的形式还管理屏幕之间的切换,新切换到的屏幕会放在栈的顶部。...navigate:跳转到其他界⾯ state:屏幕的当前state setParams:改变路由的params goBack:关闭当前屏幕 disPatch:向路由发送一个action addListener...:订阅导航生命周期的更新 isFocused:true标识屏幕获取了焦点 getParam:获取具有回退的特定参数 dangerouslyGetParent:返回父导航器 注意:一个navigation...跳转 接收两个参数,第一个是定义好的路由名,第二个是页面参数。

6.3K20
  • react-navigation,刷新你的导航一、属性介绍二、案例

    (2)TabNavigator:类似底部导航栏,用来在同一屏幕下切换不同界面 (3)DrawerNavigator:侧滑菜单导航栏,用于轻松设置带抽屉导航屏幕 ?...使用该属性可以跳转到下一个界面。下面是HomeScreen中的代码。ChatScreen是第二个导航界面。...在HomeScreen中添加一个button组件,使用routeName路由名称ChatScreen关联组件ChatScreen. export default class HomeScreen extends...2.3DreawerNavigator抽屉导航 DrawerNavigator是一个抽屉导航。设置方式其实跟设置Tab差不多。只是需要设定某些特殊的属性。...定义抽屉导航 HomeScreen与MineScree是导入外界的两个界面,将它们定义DrawerNavigator中。在抽屉导航中,将组件的属性也一起设置好。

    19.7K90

    『React Navigation 3x系列教程』之React Navigation 3x开发指南

    :返回父导航器; 注意:一个navigation有可能没有navigate、setParams以及goBack,只有state与dispatch,所以在使用navigate时要进行判断,如果没有navigate...StackActions Reset : 重置当前 state 一个新的state; Replace : 使用一个路由替换指定的路由; Push : 在堆栈顶部添加一个页面,然后跳转到该页面; Pop...push Push - 在堆栈顶部添加一条路由,并导航至该路由. 与navigate的区别在于,如果有已经加载的页面,navigate方法将跳转到已经加载的页面,不会重新创建一个新的页面。...在导航屏幕之外使用导航功能(巧用导航器的ref) 有一种场景:有的时候我们需要在导航器中所定义的屏幕之外使用导航器来做页面跳转。...,就是要想法获取navigation; 那么,如何才能在非导航器中所定义的屏幕中获取到这个navigation呢?

    4.3K30

    React Native 导航:示例教程

    移动应用程序由多个屏幕组成。在构建移动应用程序时,首要考虑的是如何处理用户在应用程序中的导航问题,例如屏幕的展示和屏幕之间的切换。...建议您始终使用该命令来安装依赖包,因为 npm 和 yarn 将始终安装最新版本,最新版本可能与您的项目不兼容。缺点是可能会出现生产级别的错误。...React Navigation 提供了一个基于堆栈的导航模型,允许屏幕被推入和弹出导航堆栈。通过堆栈导航,你可以使用一个堆栈导航器来定义你的应用程序的导航结构,该导航器维护着一个屏幕堆栈。...任何给定时间只有一个屏幕呈现给用户,每个屏幕在被推入堆栈时显示,即当用户导航某个屏幕时,它就被推到堆栈的顶部。 想象一堆纸张。导航一个屏幕会将其放在堆栈的顶部,导航回去则会将其从堆栈中移除。...这个属性允许导航指定的屏幕组件。

    35910

    Flutter学习

    在Flutter中,一个自定义widget通常是通过组合其它widget来实现的,不是继承 某些widget属性需要单个widget(child),而其它一些属性,如action,需要一组widgets...或者container简单方便 (在Flutter中可能用不同的控件可以实现相同的目的,尽量使用越简单的widget来实现) 控件在整个手机屏幕中间对齐:ConstrainedBox、SizedBox...在Flutter中,导航器管理应用程序的路由栈。将路由推入(push)导航器的栈中,将会显示更新为该路由页面。 从导航器的栈中弹出(pop)路由,将显示返回到一个路由。...MethodChannel与原生交互 将 Flutter 集成现有应用 Flutter 与 Android 的相互通信 File > New > New Module > flutter 新建自己项目目录下...‘尾随逗号’ Flutter中如何使用原生控件或组件 Flutter代码通常涉及构建相当深的树状数据结构,例如在一个build方法中。

    2.6K20

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

    目前,侧导航在安卓设备上比较流行,iOS平台上使用的还不是很普遍。所以我们的讨论还要面对一个问题:安卓和iOS应用是不是有一样的用户习惯,适用一样的导航模式?...2013年九月左右Facebook使用了一种新的导航方式——也有可能是使用的Facebook app 作为A/B test的一个样本。...而后,友好乐于提供指导的Google Play团队建议侧边栏抽屉导航(navigation drawers)作为一种新的导航方式用于安卓应用。 所以6个月后,我们决定冒险尝试改为侧边栏导航。...让人惊讶的事实 在意识结果的严重性之后,我们用两周时间出了一个版本恢复到了顶部Tab导航的模式。同时,为了不让哪些喜欢新导航的用户失望,我们在设置里保留了侧导航的选项。...facebook一定也在使用A/B test测试用户对抽屉导航和tab的不同反应很期待facebook对这一测试的最终结果。 ?

    2.8K70

    从零开始的Android:常见的UI设计模式

    在本教程中,您将学习其中的一些模式,以及它们如何通过在使用应用程序时创造出色的体验来帮助用户。 1.主画面 用户在打开应用程序时看到的第一个屏幕通常是最重要的。...在此模式中,您将采用列表和详细信息模式,并在同一屏幕上多次使用它。 区别在于列表项可以水平滚动不是垂直滚动。...导航抽屉 导航抽屉一个视图,可以从应用程序的侧面滑出,以便向用户显示选项列表。...工具列 您可能已经注意,Android应用程序中的大多数页面在屏幕顶部都包含一个工具栏。...电视应用程序不仅需要考虑这两点,而且电视还使用D-pad控制器不是触摸屏进行交互。 因此,轮播方式效果很好。 用户可以在几行项目之间移动,然后水平滚动以查看他们可用的内容。

    2.7K20

    React Native 导航:深入研究导航

    导航应该是流畅直观的,使用户体验愉快。...您有一些称为导航器的东西 - 将它们视为您应用程序导航的架构师。它们定义了用户如何一个屏幕移动到另一个屏幕。...标签导航器:曾经使用过将不同部分整齐地组织选项卡中的应用程序吗?这就是标签导航器的魔力所在。它使得在应用程序部分之间轻松切换就像轻触选项卡一样简单而有效。...抽屉导航器:为了增加一丝优雅感,React Navigation引入了抽屉导航器。这就像在侧边有一个秘密滑动抽屉,提供额外的导航选项。时尚,对吧?..." component={ProfileScreen} />抽屉导航器这就是其魔力所在:用户可以使用流畅的滑动抽屉轻松访问“主页”和“详细信息”屏幕

    18700

    Material Design — App bars: bottomApp bars: bottom

    自上次参加完回音分享会后,下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚...在需要 FAB 和三四个附加操作的手机屏幕使用FAB 3、无 FAB ?...底部的导航抽屉从底部的应用栏打开。 抽屉在底部应用程序栏打开,并显示顶部应用程序栏以在达到完整高度时关闭抽屉。...---- 位置 导航 Bottom app bar 可显示 navigation menu icon 以打开 bottom navigation drawer,但该 bar 本身不包含任何导航操作(例如向上导航至主屏幕一个关闭图标...App 导航应放置在另一个组件中,例如 top app bar 或嵌入在屏幕中。 ?

    2.4K80

    【React Native 安卓开发】----侧边栏的实现DrawerLayoutAndroid以及第三方框架react-native-side-menu的使用【第六篇】

    导航视图一开始在屏幕上并不可见,不过可以从drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定。...drawerWidth number 指定抽屉的宽度,也就是从屏幕边缘拖进的视图的宽度。...onDrawerClose function 每当导航视图(抽屉)被关闭之后调用此回调函数。 onDrawerOpen function 每当导航视图(抽屉)被打开之后调用此回调函数。...renderNavigationView function 此方法用于渲染一个可以从屏幕一边拖入的导航视图。 样例 ?...ToastAndroid组件弹出一个原生的Toast ToastAndroid.show("open drawer", ToastAndroid.SHORT); } handleDrawerClose

    6.7K40

    导航设计的10种模式

    优点: 可见性好,位置明显,易于发现,它能让用户直观了解APP的核心功能; 操作性好,用户很方便就能触及这个区域,并可在几个标签中快速切换且不会迷失方向,简单高效; 符合习惯、ios原生控件,开发简单...优点: 节省页面展示空间,让用户将更多的注意力聚焦当前页面; 由于导航界面是隐藏在屏幕之外,展开之后整一页面都是导航菜单内容,所以可扩展和个性化的空间很大; 扩展性好,导航的个数没上限。...,不是跳转至完全不同的视图。...优点: 菜单与界面的连贯性比抽屉式要好,容易让用户感知当前位置; 缺点: 位于屏幕上方,相对隐蔽且不能结合手势操作,不适合于频繁的切换功能使用; 考虑导航菜单的可用面积较小,所以一般采用列表的形式展示菜单内容...非毁灭性操作尽量不使用弹框,例如:低电、病毒、删除、支付、出错等。 举例: ? 10 组合式 描述: 一个网站或者APP内不可能只用一种导航,通常都是组合来使用

    3.5K40

    为任意屏幕尺寸构建 Android 界面

    比如其中的一个成功案例 Candy Camera,它通过优化可折叠设备和大屏幕的布局,使得使用这些设备的用户在应用上花费的时间增加了 10%,7 天用户留存率更是增长了 14%,而这并不是个例。...对于 Trackr,认为使用导航路由更有建设性。针对 MaterialTextView 的修改建议是要么减少 TextView 的宽度,要么考虑使用多列布局,这里使用多列布局更适合我们的应用。...导航应用任意一个顶层布局,但仍然可以通过选择界面中某个单项任务导航详情页面的 Fragment。...△ JetNews 侧边抽屉导航栏展示 回到 JetNews,我们可以看到在大屏状态下,侧边的抽屉导航栏会以模态的方式出现,但它会延伸到整个屏幕而出现大量空白区域。...为了并排显示 Feed 和 Post,JetNews 简单地使用 Row 包裹两个组件,第一个组件具有固定宽度,第二个组件填充屏幕的其余部分。

    4.2K20

    iOS监听H5页面goBack返回事件 & 网页监听APP返回键 (NavigationBackItemInjection)

    截取当前显示在屏幕中的WKWebView UINavigationBarDelegate NavigationType Disable all the '_blank' target in page's...app使用WebView 控制器加载H5页面进行信用卡申请 问题:用户点击残忍放弃之后,没有关闭当前控制器 重现场景:用户点击返回按钮,暂时提示框:真的不要?...解决方案: 1、iOS监听H5页面goBack返回事件 2、直接使用Safari打开URL 相关文章: iOS 封装WebView 控制器https://kunnan.blog.csdn.net/article...: 返回上一个界面 4、goForward:可以向前导航back-forward列表中的内容,相当于回到关闭的之前看过的详情界面。...; } 重写原生导航栏的pop事件处理 根据[self.webView canGoBack]来做处理 -(void)navigationBarItemBackImage{ UIImage *image

    6K21

    深入浅出 NavigationUI | MAD Skills

    这是第二个关于导航 (Navigation) 的 MAD Skills 系列,如果您想回顾过去发布的内容,请参考下面链接查看: 导航组件概览 导航对话框 在应用中导航使用 SafeArgs 使用深层链接导航...在本文中,我们将为大家讲解另外一个用例,即类似操作栏 (Action Bar)、底部标签栏或者抽屉导航栏之类的 UI 组件如何在应用中实现导航功能。...需要在应用中增加一些页面,所以有必要使用抽屉导航栏或者底部标签栏来辅助用户导航。但是我们该如何使用这些 UI 组件来集成导航功能呢?通过点击监听器手动触发导航动作吗? 不需要!无需任何监听器。...首先需要添加一个 AppBarConfiguration 对象,NavigationUI 会使用该对象来管理应用左上角的导航按钮的行为。...要解决这个问题,我会使用另外一个布局文件,它带有 w960dp 限定符,表明它适用于屏幕更大、更宽的设备。

    3K30

    Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

    自上次参加完回音分享会后,下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚...为了点击 bottom app bar 的菜单图标后提高可达性,它们从屏幕底部打开不是从侧面打开。 ---- 分解 Navigation drawers 包含嵌入在 sheet 内的 list。...导航抽屉表可以从屏幕左侧出现 (1),或者在与 bottom app bar (2)同时使用时从屏幕底部打开。 范围小于62.5% ?...如果优先考虑进行帐户切换,则可以将帐户切换器放置在导航抽屉的 header 区域 ?...---- Bottom drawer 用法 Bottom navigation drawers 是固定在屏幕底部不是左侧或右侧边缘的 modal drawers。

    3.8K40

    『React Navigation 3x系列教程』createDrawerNavigator开发指南

    path(可选):用来设置支持schema跳转时使用,具体使用会在下文的有关Schema章节中讲到; navigationOptions(可选):用以配置全局的屏幕导航选项如:title、headerRight...接收抽屉导航器的 navigation 属性 。默认为DrawerItems。...: 侧边菜单的背景; initialRouteName: 初始化哪个界面为根界面,如果不配置,默认使用RouteConfigs中的第一个页面当做根界面; order: drawer排序,默认使用配置路由的顺序...navigationOptions(屏幕导航选项) DrawerNavigator支持的屏幕导航选项的参数有: title: 可以用作headerTitle和drawerLabel的备选的通用标题。...其中路由名openDrawer对应这打开侧边栏的操作,DrawerClose对应关闭侧边栏的操作,toggleDrawer对应切换侧边栏操作,要进行这些操作么还需要一个navigation,navigation

    7.1K10
    领券