Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >是否有任何解决方案可以从其他组件中更新react本机路由器-通量中的抽屉?

是否有任何解决方案可以从其他组件中更新react本机路由器-通量中的抽屉?
EN

Stack Overflow用户
提问于 2018-03-05 06:59:15
回答 1查看 1.4K关注 0票数 1

我正在尝试创建一个动态抽屉在反应-本机-路由器-通量。我的意思是,当我改变场景抽屉可以检测到哪个场景在现在激活,并可以更新自己的新数据。我的抽屉里有一个组件,可以调用App.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<Drawer
    key={'drawer'}
    contentComponent = {() => <DrawerLayout language={this.state.language} />}
    drawerPosition= {this.state.rightOrLeft}

    <Stack key={'root'} hideNavBar>
        <Scene key={'splash'} component={Splash} initial/>
        <Scene key={'login'} component={Login} />
        <Scene key={'home'} component={Home} />
        <Scene key={'about'} component={About} />
    </Stack>
</Drawer>

我希望我能正确地解释我的梦想!

EN

回答 1

Stack Overflow用户

发布于 2018-03-05 07:47:36

如果您正在使用redux,您可以保留状态,并从商店中获取当前场景,并在其中游玩。

如果您不使用redux,则仍然可以不使用redux。一种选择是执行以下操作:

  1. 在contentComponent中使用DrawerNavigator并从单独的js文件中获取内容。 contentComponent: props => <SideBar {...props} />
  2. 现在需要全局变量在App.js名称中声明为currentScene,并将主页设置为默认。
  3. 现在让我们加入所有的sideBar.js,点击每个菜单项,将全局变量值更改为所选菜单。
  4. 根据SideBar.js中当前场景的值更改menuItems列表。

一个很好的例子是反应本地基础厨房水槽示例应用程序。阅读它中的代码,一旦您熟悉了它,然后按照以下四个步骤操作,您就可以完成了。

https://github.com/GeekyAnts/NativeBase-KitchenSink

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49113281

复制
相关文章
Flutter中的抽屉组件Drawer
1. decoration 装饰。可用于设置背景颜色和图片,值的类型为BoxDecoration;
越陌度阡
2020/12/29
2.1K0
React中的高阶组件
高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧,HOC自身不是React API的一部分,它是一种基于React的组合特性而形成的设计模式。
WindRunnerMax
2021/01/18
3.8K0
3、React组件中的this
这段代码运行,可以看到student.func()打印了student对象,因为此时this指向student对象;而studentFunc()打印了window,因为此时由window调用的,this指向window。
keyWords
2018/09/19
2.9K0
3、React组件中的this
React中的纯组件
React提供了一种基于浅比较模式来确定是否应该重新渲染组件的类React.PureComponent,通常只需要继承React.PureComponent就可以定义一个纯组件。React.PureComponent与React.Component很相似,两者的区别在于React.Component并未实现shouldComponentUpdate(),而React.PureComponent中以浅层对比prop和state的方式来实现了该函数。如果赋予React组件相同的props和state,render()函数会渲染相同的内容,那么在某些情况下使用React.PureComponent可提高性能。
WindRunnerMax
2021/01/18
2.5K0
React中传入组件的props改变时更新组件的几种实现方法
我们使用react的时候常常需要在一个组件传入的props更新时重新渲染该组件,常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中(这种state被成为派生状态(Derived State)),从而实现重新渲染。React 16.3中还引入了一个新的钩子函数getDerivedStateFromProps来专门实现这一需求。但无论是用componentWillReceiveProps还是getDerivedStateFromProps都不是那么优雅,而且容易出错。所以今天来探讨一下这类实现会产生的问题和更好的实现方案。
MudOnTire
2019/05/26
5.2K0
从0实现React 系列(二):组件更新
假设React是你日常开发的框架,在日复一日的开发中,你萌生了学习React源码的念头,在网上一顿搜索后,你发现这些教程可以分为2类:
一只图雀
2020/06/28
1.5K0
从0实现React 系列(二):组件更新
React中定义组件
PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL
张苹果
2022/09/22
8980
[译] React 中的 dumb 组件和 smart 组件
原文:https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43
江米小枣
2020/06/16
2.5K0
React 中引入 Angular 组件
为了在我的编辑器中使用 Angular,我用 Angular 编写了一个重命名功能。而为了使用它,我得再次使用一次 customEvent,而在这个微前端架构的系统中,其事件通讯机制已经相当的复杂。在这部分的代码进一步恶化之前,我得尝试有没有别的方式。于是,我想到了之前在其它组件中使用的 Web Components 技术,而 Angular 6 正好可以支持。
不知雨
2018/08/21
2.1K0
React中组件通信方式
组件间的关系 父子组件 兄弟组件(非嵌套组件) 祖孙组件(跨级组件) 通信方式 props:children props、render props 消息订阅-发布:pub-sub 集中式管理:redux conText:生产者-消费者模式 搭配方式 父子组件:props 兄弟组件:消息订阅-发布,集中式管理 祖孙组件:消息订阅-发布,集中式管理,conText(封装插件使用的多)
peng_tianyu
2022/12/15
5420
go 中 struct 是否可以比较?
今天来水一篇,最近比较忙,一直没有时间写 go 相关的,今天从一个小问题入手,来说说 struct 的比较问题。
LinkinStar
2022/09/01
8420
React基础(6)-React中组件的数据-state
一个组件最终渲染的数据结果,除了prop还有state,state代表的是当前组件的内部状态,你可以把组件看成一个'状态机",它是能够随着时间变化的数据,更多的是应当在实现交互时使用,根据状态state的改变呈现不同的UI展示
itclanCoder
2019/11/04
6.1K0
React基础(5)-React中组件的数据-props
开发一个React应用,更多的是在编写组件,而React组件最小的单位就是React元素,编写组件的最大的好处,就是实现代码的复用
itclanCoder
2019/09/28
6.7K0
React基础(5)-React中组件的数据-props
React学习(五)-React中组件的数据-props
开发一个React应用,更多的是在编写组件,而React组件最小的单位就是React元素,编写组件的最大的好处,就是实现代码的复用
itclanCoder
2020/10/28
3.4K0
React学习(五)-React中组件的数据-props
React学习(六)-React中组件的数据-state
一个组件最终渲染的数据结果,除了prop还有state,state代表的是当前组件的内部状态,你可以把组件看成一个'状态机",它是能够随着时间变化的数据,更多的是应当在实现交互时使用,根据状态state的改变呈现不同的UI展示
itclanCoder
2020/10/28
3.6K0
React学习(六)-React中组件的数据-state
[译] React 中的受控组件和非受控组件
原文:https://www.viget.com/articles/controlling-components-react/
江米小枣
2020/06/16
2.7K0
聊聊React中的权限组件设计
权限管理是中后台系统中常见的需求之一。之前做过基于 Vue 的后台管理系统权限控制[1],基本思路就是在一些路由钩子里做权限比对和拦截处理。
前端森林
2022/03/30
2.8K0
聊聊React中的权限组件设计
React中组件通信的几种方式
React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息 Child.jsx
木子星兮
2020/07/16
2.3K0
『React Navigation 3x系列教程』createDrawerNavigator开发指南
这篇文章将向大家分享createDrawerNavigator的一些开发指南和实用技巧。
CrazyCodeBoy
2019/12/10
7.1K0
『React Navigation 3x系列教程』createDrawerNavigator开发指南
React中组件间通信的方式
props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组件的通信,所谓单向数据流,就是数据只能通过props由父组件流向子组件,而子组件并不能通过修改props传过来的数据修改父组件的相应状态,所有的props都使得其父子props之间形成了一个单向下行绑定,父级props的更新会向下流动到子组件中,但是反过来则不行,这样会防止从子组件意外改变父级组件的状态,导致难以理解数据的流向而提高了项目维护难度。实际上如果传入一个基本数据类型给子组件,在子组件中修改这个值的话React中会抛出异常,如果对于子组件传入一个引用类型的对象的话,在子组件中修改是不会出现任何提示的,但这两种情况都属于改变了父子组件的单向数据流,是不符合可维护的设计方式的。 我们通常会有需要更改父组件值的需求,对此我们可以在父组件自定义一个处理接受变化状态的逻辑,然后在子组件中如若相关的状态改变时,就触发父组件的逻辑处理事件,在React中props是能够接受任意的入参,此时我们通过props传递一个函数在子组件触发并且传递值到父组件的实例去修改父组件的state。
WindRunnerMax
2021/02/04
2.5K0

相似问题

如何使用How本机路由器-通量使react本机-抽屉中的导航

11

如何实现反应-本机-抽屉反应-本机-路由器-通量与redux?

22

反应-本机-路由器-通量如何打开现场与反应-本机抽屉?

12

React本机无法从其他组件的功能体内部更新组件

37

警告:无法在React本机中从其他组件的功能体内部更新组件

15
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文