在React Native的Navigator中更改视图

那是最小的导航器-它可以做更多的事情（请参阅最后）：

1. 您需要主“导航器”视图来呈现导航器组件
2. 在导航器中，您需要指定如何渲染不同路线的场景（renderScene属性）
3. 在此“ renderScene”方法中，您应该根据要渲染的路线来渲染“视图”（场景）。路线是普通的javascript对象，按照约定，可以通过路线的“ id”参数标识场景。为了清晰和关注点分离，我通常将每个场景定义为单独的命名组件，并将这些组件的名称用作“ id”，尽管这只是一个约定。它可以是任何东西（例如场景编号）。确保将navigator作为属性传递给renderScene中的所有这些视图，以便您可以进行进一步的导航（请参见以下示例）
4. 当您想切换到另一个视图时，实际上您可以将路径推入或替换到该视图，并且导航器会考虑将该路径渲染为场景并为场景正确设置动画（尽管动画集非常有限）-您可以控制常规动画方案，但是每个场景的动画效果也不同（有关示例，请参见官方文档）。导航器保留路由的堆栈（或更确切地说是阵列），以便您可以在堆栈中已存在的路由之间自由移动（通过推送新的，弹出的，替换的等）。

“导航器”视图：

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