在 React Native 中更改导航器中的视图

Question

我是 React Native 新手。

我使用的是 NavigatorIOS，但它的限制太多，所以我尝试使用 Navigator。在 NavigatorIOS 中，我可以通过调用 this.props.navigator.push() 来更改视图，但它在 Navigator 中不起作用，它的结构似乎有所不同。如何在使用 Navigator 时更改视图？

Answer 1

这是最小的工作导航器 - 它可以做更多（见最后）：

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

"Navigator" 查看：

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} />
   }
}

一些组件：

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 and you can find a lot of examples in Samples project which is part of react-native: https://github.com/facebook/react-native/tree/master/Examples/UIExplorer

Answer 2

我发现 Facebook 示例在演示导航器的工作原理时要么过于简单，要么过于复杂。基于@jarek-potiuk 示例，我创建了一个可以来回切换屏幕的简单应用程序。

在这个例子中我使用：react-native: 0.36.1

index.android.js

import React, { Component } from 'react';
import { AppRegistry, Navigator } from 'react-native';

import Apple from './app/Apple';
import Orange from './app/Orange'

class wyse extends Component {
  render() {
    return (
      <Navigator
        initialRoute={{screen: 'Apple'}}
        renderScene={(route, nav) => {return this.renderScene(route, nav)}}
      />
    )
  }

  renderScene(route,nav) {
    switch (route.screen) {
      case "Apple":
        return <Apple navigator={nav} />
      case "Orange":
        return <Orange navigator={nav} />
      }
  }
}

AppRegistry.registerComponent('wyse', () => wyse);

app/Apple.js

import React, { Component } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';

export default class Apple extends Component {
  render() {
    return (
      <View>
        <Text>Apple</Text>
        <TouchableHighlight onPress={this.goOrange.bind(this)}>
          <Text>Go to Orange</Text>
        </TouchableHighlight>
      </View>
    )
  }

  goOrange() {
    console.log("go to orange");
    this.props.navigator.push({ screen: 'Orange' });
  }
}

app/Orange.js

import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';

export default class Orange extends Component {
  render() {
    return (
      <View>
        <Text>Orange</Text>
        <TouchableHighlight onPress={this.goApple.bind(this)}>
          <Text>Go to Apple</Text>
        </TouchableHighlight>
      </View>
    )
  }

  goApple() {
    console.log("go to apple");
    this.props.navigator.push({ screen: 'Apple' });
  }
}

Answer 3

我遇到了同样的麻烦，找不到好的导航示例。我希望能够控制视图以转到新屏幕，但也希望能够返回到上一个屏幕。

我使用了 Andrew Wei 的上述答案并创建了一个新应用程序然后复制了他的代码。这很好用，但是 .push 将继续在彼此之上创建新层（Apple > Orange > Apple > Orange > Apple > Orange 等）。所以我在 goApple() 下的 Orange.js 文件中使用 .pop 而不是 .push。

这现在就像一个“后退”按钮，这正是我在教如何导航到其他页面时一直在寻找的。

在 React Native 中更改导航器中的视图

Change view in Navigator in React Native

react-native