react-native – 在React Native中更改导航器中的视图

栏目: 服务器 · 发布时间: 5年前

内容简介:翻译自: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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

网络心理学

网络心理学

玛丽•艾肯 (Mary Aiken) / 中信出版社 / 2018-8-1 / CNY 58.00

《五十度灰》如何利用恋物心理,成为全球仅次于《圣经》的畅销读物? 为什么相对于亲朋好友,你更愿意向网络陌生人敞开心扉? 上网时总感觉时间飞逝,原来是网络的时间扭曲效应? 网络游戏中埋伏了哪些“上瘾”机关,暗中操控着你的行为? 为什么科技越发达,我们就越怕死? ...... 网络空间是一个巨大的兔子洞,里面集合了新奇、刺激、喜悦、痛苦、不安等各种元素。在日复一日的......一起来看看 《网络心理学》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换