首页 > 其他分享 >react-navigation 页面跳转

react-navigation 页面跳转

时间:2023-05-06 14:25:57浏览次数:42  
标签:web react 跳转 屏幕 navigation 页面

使用react-navigation 在进行页面跳转的时候,遇到些问题,现在来总结下,主要是web和android 的差异

react-navigation 页面跳转方法

navigation

  • navigate - 转到另一个屏幕,找出需要采取的操作
  • replace - 用新屏幕替换当前屏幕
  • push - 将新屏幕推到堆栈上
  • pop - 回到堆栈中
  • popToTop - 转到堆栈顶部
  • jumpTo - 转到选项卡导航器中的特定屏幕
  • openDrawer - 打开抽屉
  • closeDrawer - 关闭抽屉
  • toggleDrawer - 切换状态,即从关闭切换到打开,反之亦然
  • goBack() 返回

一般情况用navigate 进行屏幕的跳转就够了,在这里我遇到过这样一个问题

我的首页是tab ,有三个,在web端我从子页面返回(goback)到主页,三个子页面的 useEffect 初始化方法都会执行,不,或者具体来说,另外两个子页面会执行,

 从我的页面的按钮点到子页面,点击返回, 关注 和热门两个子页面的初始化都执行了,这样就会有一个问题,这两个页面进行了重复加载,数据被刷新了,我中途浏览了一半的记录一下子给刷没了????? 这什么鬼问题,关于这个问题,真是莫名其妙的,

 

就当我愁的时候,突然发现,特么的,安卓上的效果竟然不一样????!!!!!!!!!!!

日志方面,安卓什么日志都没打出来,可以看到,关注和热门两个页面没被触发初始化,这不刚好是我的需求么

 

 以上,就是web 和android 在这里的一点点区别,最开始在web上一直调试找办法,没想到别人已经做好了的

 

标签:web,react,跳转,屏幕,navigation,页面
From: https://www.cnblogs.com/sunxun/p/17377121.html

相关文章

  • 两个系统之间跳转免密登录
    原文链接:https://blog.csdn.net/CODING_1/article/details/125373831在处理业务场景时需要跳转不同系统软件,在每次跳转都需要重新登录系统,那么这种繁琐的登录流程会让人心态爆炸,能不能在只登陆一个系统的情况下就可以免登录跳转其他系统呢?当然是可以的.首先我们回忆一下正常......
  • CTFhub-HTTP-302跳转
    题目环境: 访问题目中的链接:http://challenge-42aaee4c28b9e47d.sandbox.ctfhub.com:10800查看网页的源码:没找到有价值的信息 用burpsuit做拦截,重放测试: flag:ctfhub{2e9248c0c0ec4618842e3198} ......
  • 通过跳转至系统通讯录方式,添加新的联系人,或编辑已有联系人
    ·需求:将联系人信息通过跳转至系统通讯录联系人编辑界面的方式,添加新的联系人,或是更新到已有联系人。联系人信息主要是姓名和电话号码,其中电话号码是list列表,可能为多个号码。·重点:如何将信息更新至已有联系人中·参考文章:https://juejin.cn/post/6953963082339057672·实......
  • vue 实现页面跳转
    1、router-link跳转//直接写上跳转的地址<router-linkto="/detail/one"><spanclass="spanfour">link跳转</span></router-link>//添加参数<router-link:to="{path:'/detail/two',query:{id:1,name:......
  • React Native之JSX语法
    一、什么是JSXJSX即JavaScriptXML。一种在React组件内部构建标签的类XML语法。JSX为react.js开发的一套语法糖,也是react.js的使用基础。React在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此推荐使用JSX。二、JSX的基本使用 2.1为什么使用JSX​原......
  • umi +react 搭建项目细节记录
    配置请求域名,有umirc.ts文件可以直接在该文件加proxy:{  '/api':{ //检测域名后面带/api/的路径   target:'http://192.168.0.90', //要请求的域名或IP地址   'changeOrigin':true,   //'pathRewrite':{'^/api':''......
  • 第二节:react-redux详解、分模块、调式工具等
    一.        二.        三.         !作       者:Yaopengfei(姚鹏飞)博客地址:http://www.cnblogs.com/yaopengfei/声     明1:如有错误,欢迎讨论,请勿谩骂^_^。声     明2:原创博客请在转载......
  • react 用父组件状态控制子组件状态方案
    react想用父组件的状态来控制子组件的状态。有时我们可能想在父组件里设置子组件某个状态的值,这时我们应该怎么实现代码呢?法一:把需要共享的状态放在子组件的参数里比如下面这个MyTestSubModal子组件,有2个状态:visible和loading,分别使用setVisible和setLoading来控制,不......
  • 在开发中,我发现的reactive和ref
    在开发中,我发现了一个问题,就是在element-plus-table组件中使用ref(),定义的数据,在vue文件内部去修改这个响应式数据,任何时候,响应式数据改变,基本上视图也会跟着变化。 但是当我觉得vue文件中script中的代码太长了,将一些功能抽出来,通过引入外部函数的方式去更新响应式数据时,就......
  • Uncaught Error: Objects are not valid as a React child (found: object with keys
    转自:react报错UncaughtError:ObjectsarenotvalidasaReactchild(found:objectwithkeys{a}...报错信息分析UncaughtError:ObjectsarenotvalidasaReactchild(found:objectwithkeys{content,key,duration}).Ifyoumeanttorenderacollectiono......