内容简介:翻译自:https://stackoverflow.com/questions/30905769/change-view-in-navigator-in-react-native
我使用的是NavigatorIOS,但它太有限了所以我正在尝试使用Navigator.在NavigatorIOS中,我可以通过调用this.props.navigator.push()来更改视图,但它在Navigator中不起作用,它的结构似乎不同.如何在使用Navigator中更改视图?
这是最小的工作导航器 – 它可以做得更多(见最后):
>您需要主“导航器”视图来渲染导航器组件
>在导航器中,您需要指定如何为不同的路径渲染场景(renderScene属性)
>在这个“renderScene”方法中,您应该根据正在渲染的路径渲染视图(场景). Route是一个简单的javascript对象,按照惯例,场景可以通过路径的“id”参数来识别.为了清楚和分离关注点,我通常将每个场景定义为单独的命名组件,并使用该组件的名称作为“id”,尽管它只是一个约定.它可以是任何东西(例如场景编号).确保将navigator as属性传递给renderScene中的所有视图,以便您可以进一步导航(参见下面的示例)
>当你想切换到另一个视图时,你实际上是推送或替换该视图的路径,导航器负责将该路线渲染为场景并正确动画场景(虽然动画集非常有限) – 你可以控制一般的动画方案但每个场景的动画也不同(参见官方文档中的一些例子).导航器保持路由的堆栈(或更确切地说是阵列),这样您就可以在堆栈中已经存在的路径之间自由移动(通过推送新的,弹出,替换等)
“导航器”查看:
render: function() { <Navigator style={styles.navigator} renderScene={(route, nav) => {return this.renderScene(route, nav)}} /> }, renderScene: function(route,nav) { switch (route.id) { case "SomeComponent": return <SomeComponent navigator={nav} /> case "SomeOtherComponent: return <SomeOtherComponent navigator={nav} /> } }
SomeComponent:
onSomethingClicked: function() { // this will push the new component on top of me (you can go back) this.props.navigator.push({id: "SomeOtherComponent"}); } onSomethingOtherClicked: function() { // this will replace myself with the other component (no going back) this.props.navigator.replace({id: "SomeOtherComponent"}); }
更多详细信息请参见 https://facebook.github.io/react-native/docs/navigator.html ,您可以在Samples项目中找到很多示例,它们是react-native: https://github.com/facebook/react-native/tree/master/Examples/UIExplorer 的一部分
翻译自:https://stackoverflow.com/questions/30905769/change-view-in-navigator-in-react-native
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- iOS小技巧·把子视图控制器的视图添加到父视图控制器
- CouchDB 视图简介及增量更新视图的方法
- c# – 将数据从部分视图传递到其父视图
- Django 基于函数的视图与基于类的视图
- MongoDB更改oplog大小
- ios – 更改NSURL的方案
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Visual Thinking
Colin Ware / Morgan Kaufmann / 2008-4-18 / USD 49.95
Increasingly, designers need to present information in ways that aid their audiences thinking process. Fortunately, results from the relatively new science of human visual perception provide valuable ......一起来看看 《Visual Thinking》 这本书的介绍吧!